H TML5 之（3）转动的圆球

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>

H TML5 之 （3）转动的圆球

H TML5 之（3）转动的圆球