今天研究的是利用HTML5的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);

? ? ?
?

运行效果：