HTML5地区自转代码
生活随笔
收集整理的這篇文章主要介紹了
HTML5地区自转代码
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1 <!doctype html>
2 <meta charset="UTF-8">
3 <html>
4 <body>
5 <!--創建canvas標簽-->
6 <!--canvas標簽中的寬高不能設置在stlye里面否則不好定位x.y-->
7 <canvas id="canvas" width="500" height="500" style="background:#666">
8 您的瀏覽器不支持canvas標簽
9 </canvas>
10 <script>
11 var canvas=document.getElementById('canvas');
12 //創建2d繪畫環境
13 var cxt=canvas.getContext('2d');
14 //聲明一個時間參數(1:1天)
15 var time=0;
16 function draw(){
17 //清除畫布(清除之前的內容 重新畫)
18 cxt.clearRect(0,0,500,500);
19 //畫行星軌道
20 cxt.strokeStyle="#fff";
21 cxt.beginPath();
22 cxt.arc(250,250,120,0,360,false);
23 cxt.closePath();
24 cxt.stroke();
25
26 //畫地球軌道
27 cxt.strokeStyle="#fff";
28 cxt.beginPath();
29 cxt.arc(250,250,100,0,360,false);
30 cxt.closePath();
31 cxt.stroke();
32 //畫太陽
33 //重置0,0點
34
35 cxt.strokeStyle="red";
36 cxt.lineWidth=1;
37 cxt.beginPath();
38 cxt.arc(250,250,20,0,360,false);
39 cxt.closePath();
40 //太陽需要填充顏色
41 //設置填充顏色(漸變色)
42 var grd=cxt.createRadialGradient(250,250,0,250,250,20);
43 grd.addColorStop(0,"#EEF920");
44 grd.addColorStop(1,"RED");
45 cxt.fillStyle=grd;
46 cxt.fill();
47 //需要在異次元空間保存所有畫布
48 cxt.save();
49 //重置00點
50 cxt.translate(250,250);
51 //畫地球
52 //設置選擇弧度
53 //cxt.rotate(90*Math.PI/190);
54 //地球公轉一周需要365天，time=1天 一天轉365/360度
55 cxt.rotate(time*365/360*Math.PI/190);
56 cxt.beginPath();
57 cxt.arc(0,-100,10,0,360,false);
58 cxt.closePath();
59 //設置一下地球的顏色
60 var grd=cxt.createRadialGradient(0,-100,0,0,-100,10);
61 grd.addColorStop(0,"#78B1E8");
62 grd.addColorStop(1,"#050C12");
63 cxt.fillStyle=grd;
64 cxt.fill();
65
66 //畫行星
67 cxt.rotate((time*0.5)*365/360*Math.PI/190);
68 cxt.beginPath();
69 cxt.arc(0,-120,10,0,360,false);
70 cxt.closePath();
71 //設置一下行星的顏色
72 var xrd=cxt.createRadialGradient(0,-100,0,0,-100,10);
73 xrd.addColorStop(0,"#78B1E8");
74 grd.addColorStop(1,"#050C12");
75 cxt.fillStyle=xrd;
76 cxt.fillStyle=grd;
77 cxt.fill();
78 cxt.restore();
79
80
81 time +=1;
82 }
83 //使地球動起來
84 setInterval(draw,100);
85 </script>
86
87 </body>
88 </html>
效果圖：
轉載于:https://www.cnblogs.com/leeten/p/3479677.html
總結
以上是生活随笔為你收集整理的HTML5地区自转代码的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Combotree--别样的构建层级js
- 下一篇： 2017年html5行业报告,云适配发布