Canvas 绘制八大行星_H5之家 - 中国HTML5教程资源分享第一站

<canvaswidth="1000"height="1000"id="canvas"style="background:#000;">

您的浏览器不支持，请升级浏览器!

</canvas>

复制代码

//设置2d绘图环境

var ctx = document.getElementById("canvas").getContext("2d");

//轨道

functiondrawTrack(){

for(var i = 0;i < 8;i++){

ctx.beginPath();

ctx.arc(500,500,(i+1) * 50,0,360,false);

ctx.strokeStyle = "#fff";//设置笔触颜色

ctx.stroke();

ctx.closePath();

}

//星球

functionStar(x,y,radius,cycle,sColor,eColor){

//画出星球需要的属性

//星球的坐标点星球的半径星球的颜色（开始颜色、结束颜色）

//公转周期

//星球坐标点

this.x = x;

this.y = y;

this.radius = radius;

this.cycle = cycle;

this.eColor = eColor;

this.sColor = sColor;

this.color = null;//渐变颜色空对象

this.time = 0;//设置一个计时器

this.draw = function(){

//save()可以这样理解原来的画布内容不变把save（）和restore()之间的内容画好了在塞进来

ctx.save();//保存之前的画布内容

ctx.translate(500,500);//重置0,0坐标点

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(0,this.eColor);//渐变颜色结束点

ctx.fillStyle = this.color;

ctx.fill();//执行填充命令

//填充星球

ctx.restore();//恢复之前保存的画布内容

this.time +=1;

}

//创建一个太阳对象的构造函数

functionSun(){

Star.call(this,0,0,20,0,"#F00","#f90");

}

//创建一个水星的对象构造方法

functionMercury(){

Star.call(this,0,-50,10,87.70,"#A69697","#5C3E40");

}

//创建一个金星的对象构造方法

functionVenus(){

Star.call(this,0,-100,10,224.701,"#C4BBAC","#1F1315");

}

//创建一个地球的对象构造方法

functionEarth(){

Star.call(this,0,-150,10,365.224,"#78B1E8","#050C12");

}

//创建一个火星的对象构造方法

functionMars(){

Star.call(this,0,-200,10,686.98,"#CEC9B6","#76422D");

}

//创建一个木星的对象构造方法

functionJupiter(){

Star.call(this,0,-250,10,4332.589,"#C0A48E","#322222");

}

//创建一个土星的对象构造方法

functionSaturn(){

Star.call(this,0,-300,10,10759.5,"#F7F9E3","#5C4533");

}

//创建一个天王星的对象构造方法

functionUranus(){

Star.call(this,0,-350,10,30799.095,"#A7E1E5","#19243A");

}

//创建一个海王星的对象构造方法

functionNeptune(){

Star.call(this,0,-400,10,60152,"#0661B2","#1E3B73");

}

//创建太阳对象实例

var sun=new Sun();

//创建水星对象实例

var water=new Mercury();

//创建金星对象实例

var gold=new Venus();

//创建一个地球对象实例

var diqiu=new Earth();

//创建一个火星对象实例

var fire=new Mars();

//创建一个木星对象实例

var wood=new Jupiter();

//创建一个土星对象实例

var soil=new Saturn();

//创建一个天王星对象实例

var god=new Uranus();

//创建一个海王星对象实例

var sea=new Neptune();

functionmove(){

//清除画布

ctx.clearRect(0,0,1000,1000);

//画出轨道

drawTrack();

//画出每个星球

sun.draw();

water.draw();

gold.draw();

diqiu.draw();

fire.draw();

wood.draw();

soil.draw();

god.draw();

sea.draw();

}

//使让星球进行运动

setInterval(move,10);

复制代码