盒子
盒子

Canvas 绘制八大行星

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

1
2
3
<canvas width="1000" height="1000" id="canvas" style="background:#000;">
您的浏览器不支持,请升级浏览器!
</canvas>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
//设置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