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

转载于:https://www.cnblogs.com/xiaobuild/archive/2011/07/20/2111461.html

相关资源：HTML5 Canvas 实现雨滴下落在玻璃表面的动画效果