HTML5 练手之二，一个能够为之圆心转动的圆球，原理和时钟的非常像，只是要把握转动的时间控制，同时加入了点渐变色
HTML5 练手之二，一个能够为之圆心转动的圆球，原理和时钟的非常像，只是要把握转动的时间控制，同时加入了点渐变色
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <title>Sun</title>
5 <style>
6 #sun{
7 background:black;
8 }
9 </style>
10 </head>
11 <body>
12 <canvas id="sun" width="1000" height="1000" >
13 您的浏览器不支持标签，无法看到时钟
14 </canvas>
15 </body>
16 <script>
17 var clock = document.getElementById("sun");
18 var cxt = clock.getContext("2d");
19 //生命一个时间函数
20 var time = 0;
21 function drawEarch(){
22 cxt.clearRect(0,0,1000,1000);
23 //轨道
24 cxt.strokeStyle = "#fff";
25 cxt.beginPath();
26 cxt.arc(500,500,100,0,360,false);
27 cxt.closePath();
28 cxt.stroke();
29 //太阳
30 cxt.beginPath();
31 cxt.arc(500,500,20,0,360,false);
32 //设置渐变颜色
33 var suncolor = cxt.createRadialGradient(500,500,0,500,500,20);
34 suncolor.addColorStop(0,"#f90");
35 suncolor.addColorStop(1,"red");
36 cxt.fillStyle = suncolor;
37 cxt.fill();
38 cxt.closePath();
39 //地球
40 //开启异次元空间
41 cxt.save();
42 cxt.beginPath();
43 cxt.lineWidth = 10;
44 cxt.strokeStyle="#f90";
45 //设置原点
46 cxt.translate(500,500);
47 //设置旋转角度
48 cxt.rotate(time*365/360*Math.PI/180);
49 cxt.arc(0,-100,10,0,360,false);
50 var earchcolor = cxt.createRadialGradient(0,-100,0,0,-100,10);
51 earchcolor.addColorStop(0,"#78B1E8");
52 earchcolor.addColorStop(1,"#050C12");
53 cxt.fillStyle = earchcolor;
54 cxt.closePath();
55 cxt.fill();
56 cxt.restore();
57 time +=1;
58 }
59
60
61 drawEarch;
62 setInterval(drawEarch,10);
75 </script>
76 </html>