用HTML5制作数字时钟的教程

就是这个数字时钟，当时觉得这个创意不错，但是也没去折腾。直到昨天同事又在网上看到这个案例，他觉得很酷炫，就跑过来问我，这个是怎么实现的，然后我大概想了一下实现方法后也来了点兴趣，就花了一点时间模仿做出来了一个。不同的是，岑安用的是div来做的。而我就是用canvas来实现的。用canvas来做性能方面会更好，因为就单单操控每个点的运动，用js控制dom的style属性跟用js控制canvas绘图相比性能方面肯定是有所欠缺的。

　　先上个我做的DEMO吧，然后再简述一下做这个的方法：   看DEMO请戳我 。

　　做这个思路很简单，就是通过字符串保存各个数字的位置：　
复制代码

1. var numData = [   
2.             "1111/1001/1001/1001/1001/1001/1111", //0   
3.             "0001/0001/0001/0001/0001/0001/0001", //1   
4.             "1111/0001/0001/1111/1000/1000/1111", //2   
5.             "1111/0001/0001/1111/0001/0001/1111", //3   
6.             "1010/1010/1010/1111/0010/0010/0010", //4   
7.             "1111/1000/1000/1111/0001/0001/1111", //5   
8.             "1111/1000/1000/1111/1001/1001/1111", //6   
9.             "1111/0001/0001/0001/0001/0001/0001", //7   
10.             "1111/1001/1001/1111/1001/1001/1111", //8   
11.             "1111/1001/1001/1111/0001/0001/1111", //9   
12.             "0000/0000/0010/0000/0010/0000/0000", //:   
13.         ]  

　　0代表没像素，1代表有像素，/是为了更好看些，就是分行嘛，简单说起来：比如0就是：

1.         1  1  1  1   
2.   
3. 　　1  0  0  1   
4.   
5. 　　1  0  0  1   
6.   
7. 　　1  0  0  1   
8.   
9. 　　1  0  0  1   
10.   
11. 　　1  0  0  1   
12.   
13. 　　1  1  1  1　　   

这样就很清楚了吧。从0到9还有一个：号都用字符串表示好。

　　然后就写个粒子对象，也就是像素点：

1. var P_radius = 8,Gravity = 9.8;   
2.         var Particle = function(){   
3.             this.x = 0;   
4.             this.y = 0;   
5.             this.vx = 0;   
6.             this.vy = 0;   
7.             this.color = "";   
8.             this.visible = false;   
9.             this.drop = false;   
10.         }   
11.         Particle.prototype = {   
12.             constructors:Particle,   
13.             paint:function(){        //绘制自身   
14.                 ctx.fillStyle = this.color;   
15.             &nbs