Canvas基础学习（一）——实现简单时钟显示
HTML5最受欢迎的功能就是<canvas>元素。这个元素负责在页面中设定一个区域，然后就可以通过JavaScript动态地在这个区域中绘制图形。关于<canvas>元素的一些基本用法可以参考w3school。
花了一下午时间熟悉了下常用的API，也参考了下网上的一些demo，实现了一个简单的时钟显示，代码记录如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>canvas-clock</title> 6 <style type="text/css"> 7 /* canvas drawing */ 8 .clock { 9 width: 300px; 10 margin: 0 auto; 11 } 12 #clock { 13 width: 300px; 14 height: 300px; 15 } 16 </style> 17 <script type="text/javascript"> 18 var clockDraw = function(context) { 19 var now = new Date(); 20 context.save(); 21 context.clearRect(0, 0, 300, 300); 22 context.scale(1, 0.5); 23 context.translate(150, 150); 24 25 // init hours 26 context.save(); 27 for (var i = 0; i < 12; i++ ) { 28 context.beginPath(); 29 context.rotate(Math.PI / 6); 30 context.moveTo(0, -123); 31 context.lineWidth = 5; 32 context.lineTo(0, -110); 33 context.stroke(); 34 } 35 context.restore(); 36 37 // init minutes 38 context.save(); 39 context.lineWidth = 5; 40 for (i = 0; i < 60; i++) { 41 if (i % 5 != 0) { 42 context.beginPath(); 43 context.moveTo(0, 118); 44 context.lineWidth = 2; 45 context.lineTo(0, 115); 46 context.stroke(); 47 } 48 context.rotate(Math.PI / 30); 49 } 50 context.restore(); 51 52 var sec = now.getSeconds(); 53 var min = now.getMinutes(); 54 var hr = now.getHours(); 55 hr = hr >= 12 ? hr - 12 : hr; 56 57 context.fillStyle = "black"; 58 59 // draw hour 60 context.save(); 61 context.rotate(hr * (Math.PI / 6) + (Math.PI / 360) * min + (Math.PI / 21600) * sec); 62 context.lineWidth = 7; 63 context.beginPath(); 64 context.moveTo(0, 10); 65 context.lineTo(0, -80); 66 context.stroke(); 67 context.restore(); 68 69 // draw minute 70 context.save(); 71 context.rotate((Math.PI / 30) * min + (Math.PI / 1800) * sec); 72 context.lineWidth = 5; 73 context.beginPath(); 74 context.moveTo(0, 20); 75 context.lineTo(0, -100); 76 context.stroke(); 77 context.restore(); 78 79 // draw second 80 context.save(); 81 context.rotate(sec * Math.PI / 30); 82 context.strokeStyle = "#D40000"; 83 context.fillStyle = "#D40000"; 84 context.lineWidth = 4; 85 context.beginPath(); 86 context.moveTo(0, 30); 87 context.lineTo(0, -113); 88 context.stroke(); 89 context.beginPath(); 90 context.arc(0, 0, 5, 0, Math.PI * 2, false); 91 context.fill(); 92 context.restore(); 93 94 context.beginPath(); 95 context.arc(0, 0, 125, 0, Math.PI * 2, false); 96 context.lineWidth = 5; 97 context.strokeStyle = '#325FA2'; 98 context.stroke(); 99 100 context.restore(); 101 }; 102 103 var initClock = function() { 104 var clock = document.getElementById("clock"); 105 if (clock.getContext) { 106 var context = clock.getContext("2d"); 107 clockDraw(context); 108 setInterval((function() { 109 return function() { 110 clockDraw(context); 111 } 112 })(context), 1000); 113 }; 114 }; 115 116 window.onload = function() { 117 //canvas drawing 118 initClock(); 119 }; 120 </script> 121 </head> 122 <body> 123 <div class="clock"> 124 <canvas id="clock">A drawing of clock.</canvas> 125 </div> 126 </body> 127 </html>
