html5 canvas 时钟实例

李三川 · 发表于 2012-12-10 15:46:17

html5 clock
<div class="cnblogs_code"> 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>html5 clock</title> 5 <meta content="text/html; charset=UTF-8"> 6 </head> 7 8 <body> 9 <canvas id="myCanvas" width="400" height="300"></canvas>10 <script type="text/javascript"> 11 var c = document.getElementById("myCanvas"); 12 var cxt = c.getContext("2d"); 13 14 var slen = 60; 15 var mlen = 48; 16 var hlen = 35; 17 18 cxt.strokeRect(0, 0, c.width, c.height); 19 20 cxt.beginPath(); 21 cxt.arc(200, 150, 100, 0, 2 * Math.PI, true); 22 cxt.stroke(); 23 cxt.closePath(); 24 25 cxt.beginPath(); 26 cxt.translate(200, 150); 27 cxt.rotate(-Math.PI / 2); 28 cxt.save(); 29 30 for (var i = 0; i < 60; i++) { 31 if (i % 5 == 0) { 32 cxt.fillRect(84, -3, 16, 6); 33 cxt.fillText("" + (i / 5 == 0 ? 12 : (i / 5>9?i/5:"0"+i/5)), 70, 3); 34 } else { 35 cxt.fillRect(90, -1, 10, 2); 36 } 37 cxt.rotate(Math.PI / 30); 38 } 39 cxt.closePath(); 40 41 var s = 0, m = 0, h = 0;42 43 function Refresh() { 44 cxt.restore(); 45 cxt.save();46 cxt.rotate(s * Math.PI / 30); 47 cxt.clearRect(-13, -2, slen+2, 4); 48 cxt.restore(); 49 cxt.save(); 50 51 cxt.rotate((m+s/60) * Math.PI / 30); 52 cxt.clearRect(-11, -2, slen+2, 4); 53 cxt.restore(); 54 cxt.save(); 55 56 cxt.rotate((h+m/60) * Math.PI / 6); 57 cxt.clearRect(-9, -3, slen+2, 5); 58 cxt.restore(); 59 cxt.save();60 61 var time = new Date(); 62 s =time.getSeconds(); 63 m =time.getMinutes(); 64 h =time.getHours(); 65 66 cxt.rotate((h+m/60) * Math.PI / 6); 67 cxt.fillRect(-8, -2, hlen, 4); 68 cxt.restore(); 69 cxt.save();70 71 cxt.rotate((m+s/60) * Math.PI / 30); 72 cxt.fillRect(-10, -1.5, mlen, 3); 73 cxt.restore(); 74 cxt.save();75 76 cxt.rotate(s * Math.PI / 30); 77 cxt.fillStyle='#2e2';78 cxt.fillRect(-12, -1, slen, 2);79 } 80 81 var MyInterval = setInterval("Refresh();", 1000); 82 </script>83 </body>84 </html>

		自动登录	找回密码
密码			立即注册