HTML5的Canvas画图模拟太阳系周转_H5之家 - 中国HTML5教程资源分享第一站

当前位置:我的异常网» HTML/CSS » HTML5的Canvas画图模拟太阳系周转

HTML5的Canvas画图模拟太阳系周转

网友分享于：2014-05-05 浏览：3次

HTML5的Canvas画图模拟太阳系运转

今天研究的是利用HTML5的Cnavas画图来模拟太阳系运转，首先，在这个太阳系里分为画轨道和画星球两个部分，对

于每一个星球我们要知道它的颜色和公转周期，如下图。

采用面向对象编程的思想，代码如下：

<!DOCTYPE HTML> <html> <head></head> <body> <canvas id="canvas" width="1000" height="1000" style="background:#000"> 你的浏览器不支持canvas标签！ </canvas> <script> //设置2d绘图环境 var ctx = document.getElementById("canvas").getContext("2d"); //画轨道 function drawTrack(){ for(var i=0;i<8;i++){ ctx.beginPath(); ctx.arc(500,500,(i+1)*50,0,360,false); ctx.closePath(); ctx.strokeStyle = "#fff"; ctx.stroke(); } } drawTrack(); //画星球 function Star(x,y,radius,cycle,sColor,eColor){ //星球需要哪些属性 //星球的坐标点 this.x = x; this.y = y; //星球的半径 this.radius = radius; //设置周期 this.cycle = cycle; //星球的颜色，起始颜色和结束颜色 this.sColor = sColor; this.eColor = eColor; this.color = null; //设置一个计时器 this.time = 0; this.draw = function(){ //保存之前的内容 ctx.save(); //重置0，0坐标 ctx.translate(500,500); //旋转角度 ctx.rotate(this.time*(360/this.cycle)*Math.PI/180); //画星球 ctx.beginPath(); ctx.arc(this.x,this.y,this.radius,0,360,false); ctx.closePath(); //设置星球的填充颜色 this.color = ctx.createRadialGradient(this.x,this.y,0,this.x,this.y,this.radius); this.color.addColorStop(0,this.sColor); this.color.addColorStop(1,this.eColor); ctx.fillStyle = this.color; ctx.fill(); //恢复之前画布的内容 ctx.restore(); this.time += 1; } } //创建一个太阳的构造函数 function Sun(){ Star.call(this,0,0,20,0,"#FFFF00","#FF9900"); } //创建一个水星的构造函数 function Mercury(){ Star.call(this,0,-50,10,87.70,"#A69697","#5C3E40"); } //创建一个金星的构造函数 function Venus(){ Star.call(this,0,-100,10,224.701,"#C4BBAC","#1F1315"); } //创建一个地球的构造函数 function Earth(){ Star.call(this,0,-150,10,365.2422,"#78B1E8","#050C12"); } //创建一个火星的构造函数 function Mars(){ Star.call(this,0,-200,10,686.98,"#CEC9B6","#76422D"); } //创建一个木星的构造函数 function Jupiter(){ Star.call(this,0,-250,10,4332.589,"#C0A48E","#322222"); } //创建一个土星的构造函数 function Saturn(){ Star.call(this,0,-300,10,10759.5,"#F7F9E3","#5C4533"); } //创建一个天王星的构造函数 function Uranus(){ Star.call(this,0,-350,10,30799.095,"#A7E1E5","#19243A"); } //创建一个海王星的构造函数 function Neptune(){ Star.call(this,0,-400,10,60152,"#0661B2","#1E3B73"); } var sun = new Sun(); var mercury = new Mercury(); var venus = new Venus(); var earth = new Earth(); var mars = new Mars(); var jupiter = new Jupiter(); var saturn = new Saturn(); var uranus = new Uranus(); var neptune = new Neptune(); function Move(){ ctx.clearRect(0,0,1000,1000); drawTrack(); sun.draw(); mercury.draw(); venus.draw(); earth.draw(); mars.draw(); jupiter.draw(); saturn.draw(); uranus.draw(); neptune.draw(); } setInterval(Move,10); </script> </body> </html>

运行效果：