原文链接 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;
