用HTML5制作数字时钟的教程_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
3. 　　1 0 0 1
5. 　　1 0 0 1
7. 　　1 0 0 1
9. 　　1 0 0 1
11. 　　1 0 0 1
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. ctx.beginPath();
16. ctx.arc(this.x,this.y,P_radius,0,2*Math.PI);
17. ctx.fill();
18. },
19. reset:function(x,y,color){ //重置
20. this.x = x;
21. this.y = y;
22. this.vx = 0;
23. this.vy = 0;
24. this.color = color;
25. this.visible = true;
26. this.drop = false;
27. },
28. isDrop:function(){ //落下
29. this.drop = true;
30. var vx = Math.random()*20+15
31. this.vx = Math.random()>=0.5?-vx : vx;
32. },
33. update:function(time){ //每一帧的动作
34. if(this.drop){
35. this.x += this.vx*time;
36. this.y += this.vy*time;
38. var vy = this.vy+Gravity*time;
40. if(this.y>=canvas.height-P_radius){
41. this.y = canvas.height-P_radius
42. vy = -vy*0.7;
43. }
45. this.vy = vy;