导航
导航

Canvas 绘制八大行星

原文链接 http://blog.poetries.top/2016/12/02/Canvas-draw-sun/
在线演示地址 http://codepen.io/poetries/pen/KNZLJZ

<canvas width="1000" height="1000" id="canvas" style="background:#000;">
您的浏览器不支持,请升级浏览器!
</canvas>
//设置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.strokeStyle = "#fff";//设置笔触颜色
ctx.stroke();
ctx.closePath();
}
}


//星球

function Star(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;
}
}

//创建一个太阳对象的构造函数
function Sun(){
Star.call(this,0,0,20,0,"#F00","#f90");
}
//创建一个水星的对象构造方法
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.224,"#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 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();


function move(){
//清除画布
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);
支持一下
扫一扫,支持poetries
  • 微信扫一扫
  • 支付宝扫一扫