Html5 Canvas 时钟 & 地球，月球圆周运动 & 水滴效果

Html5 Canvas 动画

时钟,具体代码如下：

1 clock();
2 setInterval(clock, 1000);

View Code

 1 function clock() {
 2             var now = new Date();
 3 
 4             ctx.save();
 5             ctx.clearRect(0, 0, 150, 150);
 6             ctx.translate(75, 75);
 7             ctx.scale(0.4, 0.4);
 8             ctx.rotate(-Math.PI / 2);
 9             ctx.strokeStyle = "black";
10             ctx.fillStyle = "white";
11             ctx.lineWidth = 8;
12             ctx.lineCap = "round";
13 
14             // Hour marks 12刻度
15             ctx.save();
16             for (var i = 0; i < 12; i++) {
17                 ctx.beginPath();
18                 ctx.rotate(Math.PI / 6);
19                 ctx.moveTo(100, 0);
20                 ctx.lineTo(120, 0);
21                 ctx.stroke();
22             }
23             ctx.restore();
24 
25             // Minute marks  60小刻度
26             ctx.save();
27             ctx.lineWidth = 5;
28             for (i = 0; i < 60; i++) {
29                 if (i % 5 != 0) {
30                     ctx.beginPath();
31                     ctx.moveTo(117, 0);
32                     ctx.lineTo(120, 0);
33                     ctx.stroke();
34                 }
35                 ctx.rotate(Math.PI / 30);
36             }
37             ctx.restore();
38 
39             var sec = now.getSeconds();
40             var min = now.getMinutes();
41             var hr = now.getHours();
42             hr = hr >= 12 ? hr - 12 : hr;
43 
44             ctx.fillStyle = "black";
45             // write Hours 时针
46             ctx.save();
47             ctx.rotate(hr * (Math.PI / 6) + (Math.PI / 360) * min + (Math.PI / 21600) * sec)
48             ctx.lineWidth = 14;
49             ctx.beginPath();
50             ctx.moveTo(-20, 0);
51             ctx.lineTo(80, 0);
52             ctx.stroke();
53             ctx.restore();
54 
55             // write Minutes 分针
56             ctx.save();
57             ctx.rotate((Math.PI / 30) * min + (Math.PI / 1800) * sec)
58             ctx.lineWidth = 10;
59             ctx.beginPath();
60             ctx.moveTo(-28, 0);
61             ctx.lineTo(112, 0);
62             ctx.stroke();
63             ctx.restore();
64 
65             // Write seconds  秒针
66             ctx.save();
67             ctx.rotate(sec * Math.PI / 30);
68             ctx.strokeStyle = "#D40000";
69             ctx.fillStyle = "#D40000";
70             ctx.lineWidth = 6;
71             ctx.beginPath();
72             ctx.moveTo(-30, 0);
73             ctx.lineTo(83, 0);
74             ctx.stroke();
75             ctx.beginPath();
76             ctx.arc(0, 0, 10, 0, Math.PI * 2, true);
77             ctx.fill();
78             ctx.beginPath();
79             ctx.arc(95, 0, 10, 0, Math.PI * 2, true);
80             ctx.stroke();
81             ctx.fillStyle = "#555";
82             ctx.arc(0, 0, 3, 0, Math.PI * 2, true);
83             ctx.fill();
84             ctx.restore();
85 
86             //钟盘
87             ctx.beginPath();
88             ctx.lineWidth = 14;
89             ctx.strokeStyle = '#325FA2';
90             ctx.arc(0, 0, 142, 0, Math.PI * 2, true);
91             ctx.stroke();
92 
93             ctx.restore();
94         }

地球，月球圆周运动,具体代码如下：

1 　　　　　　　　　　ctx.translate(400, 300);
2                 ctx.save();
3                 setInterval(round, 50);

View Code

 1  function round() {
 2             if (t++ >= 360) { t = 0; }            
 3             ctx.clearRect(-400, -300, canvas.width, canvas.height);
 4 
 5             //画太阳
 6             
 7             ctx.beginPath();
 8             ctx.fillStyle = '#F27E4D';
 9             ctx.arc(0, 0, 50, 0, Math.PI * 2, true);
10             ctx.fill();
11             ctx.closePath();      
12                   
13             //地球运动轨迹
14             ctx.beginPath();
15             ctx.strokeStyle = '#325FA2';
16             ctx.arc(0, 0, 150, 0, Math.PI * 2, true);
17             ctx.stroke();
18             ctx.closePath();           
19             
20             //地球
21             ctx.save();
22             ctx.rotate(Math.PI / 180 * t);
23             ctx.fillStyle = "#00f";
24             ctx.beginPath(); 
25             ctx.arc(150, 0, 10, 0, Math.PI * 2, true);
26             ctx.fill();
27             ctx.closePath();            
28             
29             //月球轨迹
30             ctx.save();
31             ctx.translate(150, 0);
32             ctx.strokeStyle = '#ccc';
33             ctx.beginPath();
34             ctx.arc(0, 0, 50, 0, Math.PI * 2, true);
35             ctx.stroke();
36             ctx.closePath();                  
37             
38             //月球
39             ctx.rotate(Math.PI / 180 * t * 5);
40             ctx.fillStyle = '#ccc';
41             ctx.beginPath();
42             ctx.arc(50, 0, 5, 0, Math.PI * 2, true);
43             ctx.fill();
44             ctx.closePath();
45             ctx.restore();
46             ctx.restore();
47         }

水滴效果,具体代码如下：

1  timeSet = setInterval(drop, 100);

View Code

 1         function drop() {
 2             ctx.clearRect(0, 0, canvas.width, canvas.height);
 3             if (y + 10 < 565) {
 4                 v += 2;
 5                 y += v;
 6                 ctx.beginPath();
 7                 ctx.fillStyle = "#96C3F7";
 8                 ctx.moveTo(400, y - 10);
 9                 ctx.lineTo(405, y);
10                 ctx.lineTo(395, y);
11                 ctx.arc(400, y, 5, 0, Math.PI * 1, false);
12                 ctx.closePath();
13                 ctx.fill();
14             }
15             else {
16                 if (t > 20) {
17                     clearInterval(timeSet);                    
18                 }
19                 if (t == 1) {
20                     ctx.beginPath();
21                     ctx.fillStyle = "#96C3F7";
22                     ctx.moveTo(400, y - 10);
23                     ctx.lineTo(405, y);
24                     ctx.lineTo(395, y);
25                     ctx.arc(400, y, 5, 0, Math.PI * 1, false);
26 //                    ctx.closePath();
27                     ctx.fill();
28                     ctx.translate(0, 600);
29                     ctx.scale(1, 0.3);                    
30                 }
31                 var r=1,a=1;
32                 for (i = 0; i < t; i++) {
33                     r += i + i;
34                     a-=0.05;
35                     ctx.strokeStyle = "rgba(150, 195, 247,"+a+")";  
36                     ctx.lineWidth = i-0.5;               
37                     ctx.beginPath();
38                     ctx.arc(400,0,  r, 0, Math.PI * 2, true);
39                     ctx.stroke();
40                     ctx.closePath();
41                 }
42                 t = t + 1;                
43             }
44         }
45