首页 > 代码库 > Canvas基础学习（一）——实现简单时钟显示
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 drawing118 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>
Canvas基础学习（一）——实现简单时钟显示
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。