上周开始利用闲暇时间看html5 canvas技术。觉得非常好玩。就利用 canvas 做了一个简陋的钟表。源码非常简单，但是在制作的过程中，进入的误区却不少，浪费了很多时间。先上源码，然后在说说我走的岔路。

源码是基于 require.js 去写的，可以去 官网 了解 require.js 的详细资料。

 1 define(function(){
 2     function T_clock(options){
 3         this.container = options.container || document.body;
 4         if(!document.createElement('canvas').getContext){
 5             alert('当前浏览器不支持canvas！');
 6             return;
 7         }
 8         this.init();
 9     };
10     var cfg = {
11         bg:'#ffaa77',
12         bg_rbga:'rgba(255,170,119,1)',
13         outCircleLen:99,
14         innerCircleLen:94,
15         minLen:65,
16         secLen:75,
17         hourLen:55,
18         ctx:undefined
19     };
20     T_clock.prototype.init = function(){
21         var cv = document.createElement('canvas');
22         this.container.appendChild(cv);
23         cv.height = 600;
24         cv.width = 800;
25         cv.style.backgroundColor = cfg.bg;
26         if(cv.getContext){
27             cfg.ctx = cv.getContext('2d');
28         }
29         setInterval(function(){
30             cfg.ctx.clearRect(0,0,800,600);
31             cfg.ctx.beginPath();
32             cfg.ctx.lineWidth = 1;
33             cfg.ctx.arc(100,100,cfg.outCircleLen,0,2*Math.PI,false);
34             cfg.ctx.moveTo(100 + cfg.innerCircleLen,100);
35             cfg.ctx.arc(100,100,94,0,2*Math.PI,false);
36 
37             cfg.ctx.font = 'bold 14px 宋体';
38             cfg.ctx.textAlign = 'center';
39             cfg.ctx.textBaseline = 'middle';
40             var numR = 76,x,y,arc;
41             for(var i=1,arc=-Math.PI/3;i<13;i++,arc+= Math.PI/6){
42                 x = 100 + numR * Math.cos(arc);
43                 y = 100 + numR * Math.sin(arc);
44                 cfg.ctx.fillText(i,x,y);
45             }
46             for(i=0,arc=-Math.PI/2; i<60; i++,arc+=Math.PI/30){
47                 x = 100 + 94 * Math.cos(arc);
48                 y = 100 + 94 * Math.sin(arc);
49                 cfg.ctx.moveTo(x,y);
50                 if(i % 5 == 0){
51                     x = 100 + (94 - 10) * Math.cos(arc);
52                     y = 100 + (94 - 10) * Math.sin(arc);
53                 }
54                 else{
55                     x = 100 + (94 - 5) * Math.cos(arc);
56                     y = 100 + (94 - 5) * Math.sin(arc);
57                 }
58                 cfg.ctx.lineTo(x,y);
59             }
60             cfg.ctx.closePath();
61             cfg.ctx.stroke();
62 
63             var d = new Date();
64             var sec = d.getSeconds();
65             var min = d.getMinutes();
66             var hour = d.getHours();
67             var sec_angle = - Math.PI * sec / 30 + Math.PI;
68 
69             cfg.ctx.beginPath();
70             cfg.ctx.strokeStyle = '#F00';
71             cfg.ctx.lineWidth = 1;
72             cfg.ctx.moveTo(100,100);
73             cfg.ctx.lineTo(100 + cfg.secLen * Math.sin(sec_angle),100 + cfg.secLen * Math.cos(sec_angle));
74             cfg.ctx.closePath();
75             cfg.ctx.stroke();
76 
77             cfg.ctx.beginPath();
78             cfg.ctx.strokeStyle = '#555';
79             cfg.ctx.lineWidth = 2;
80             cfg.ctx.moveTo(100,100);
81             var min_angle = - Math.PI * min / 30 + Math.PI - Math.PI * sec / 1800;
82             cfg.ctx.lineTo(100 + cfg.minLen * Math.sin(min_angle),100 + cfg.minLen * Math.cos(min_angle));
83             cfg.ctx.closePath();
84             cfg.ctx.stroke();
85 
86             cfg.ctx.beginPath();
87             cfg.ctx.strokeStyle = '#000';
88             cfg.ctx.lineWidth = 2;
89             cfg.ctx.moveTo(100,100);
90             var hour_angle = - Math.PI * hour / 6 + Math.PI - Math.PI * min / 360;
91             cfg.ctx.lineTo(100 + cfg.hourLen * Math.sin(hour_angle),100 + cfg.hourLen * Math.cos(hour_angle));
92             cfg.ctx.closePath();
93             cfg.ctx.stroke();
94         },1000);
95 };
96 
97 return T_clock;
98 })
钟表模块
1     require(['../../js/require/config.js'],function(cfg){
2         require(['h5/L_canvas'],function(Canvas){
3             new Canvas({});
4         });
5     })
引用钟表模块

上效果图；

误区一：错误的理解 canvas 中的每一个图（画的每一个元素）都是一个单独的对象，可以自己销毁（擦除）自己。其实不是这样的，canvas 的 context 对象只提供了一个 clearRect 方法去清空指定区域的内容。

误区二：在一个钟表里，只有指针是动的，钟表的圆盘及数字是不动的。于是我就想在做指针动画的时候，不清除钟表的圆盘和数字，只是清除指针重画指针来实现这样的效果。期间我试了很多办法都不行。最典型的就是用了 canvas 的这个属性 globalCompositeOperation, 通过用背景色重画动画的上一个动作，用于擦除上一个动画，效果非常的莫名其妙，推测应该是 Math 对象的一些运算结果都不是精确值导致的。最后我只能在每次心跳时，清空画布重画钟表的圆盘和数字来实现动画效果；

误区三：每画一个元素，如果样式和下一个原色的样式不一样，都要单独设置元素的样式，并且要嵌在context.beginPah,context.closePath()内部，每调用closePath方法，都要调用Stroke或者fill方法把元素画出来。否则画布不会显示的。参看上传的第一块代码。