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