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>
posted @ 2014-09-05 22:42  ywang1724  阅读(416)  评论(0编辑  收藏  举报