您现在的位置是：网站首页> 编程资料编程资料

用HTML5制作数字时钟的教程Html5 canvas实现粒子时钟的示例代码HTML写一个网页动态时钟HTML5实现可缩放时钟代码用HTML5的canvas实现一个炫酷时钟效果使用html5 canvas 画时钟代码实例分享html5绘制时钟动画html5时钟实现代码HTML 罗盘式时钟的实现

2021-08-31 908人已围观

简介 这篇文章主要介绍了用HTML5制作数字时钟的教程,主要利用HTML5中的Canvas API,需要的朋友可以参考下

2015511172231746.png (836×306)

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

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

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

XML/HTML Code复制内容到剪贴板
  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就是：

　　

XML/HTML Code复制内容到剪贴板
  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还有一个：号都用字符串表示好。

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

XML/HTML Code复制内容到剪贴板
  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;   
  37.   
  38.                     var vy = this.vy+Gravity*time;   
  39.   
  40.                     if(this.y>=canvas.height-P_radius){   
  41.                         this.y = canvas.height-P_radius   
  42.                         vy = -vy*0.7;   
  43.                     }   
  44.   
  45.                     this.vy = vy;   
  46.   
  47.                     if(this.x<-P_radius||this.x>canvas.width+P_radius||this.y<-P_radius||this.y>canvas.height+P_radius){   
  48.                         this.visible = false;   
  49.                     }   
  50.                 }   
  51.             }   
  52.         }　　   
  53.   

粒子对象的属性比较简单，就位置，速度，以及是否可视化。方法的话，paint是绘制方法，reset是重置（因为粒子要循环利用的，提升性能），isDrop是粒子落下方法，update就是每一帧更新粒子的动作，update中当粒子运动超出canvas的绘制区域时，就把它的可视化置为false，在粒子容器中保存起来等待下一次调用。

　　写好粒子对象后，就要考虑如何让粒子按照位置画上去，同时当粒子不需要用时能够让他做自由落体的动画了。

　　先画背景（也就是那没有像素的白点）：

XML/HTML Code复制内容到剪贴板
  1. function drawBg(){   
  2.             var tx = (canvas.width-((P_radius*2+X_J)*4*8+7*xjg))/2;   
  3.             for(var i=0;i<8;i++){   
  4.                 var ty = (canvas.height-((P_radius+yjg)*6))/2;   
  5.               

    上一篇：用HTML5 实现橡皮擦的涂抹效果的教程Html5+JS实现手机摇一摇功能HTML5 Canvas的事件处理介绍HTML5 audio标签使用js进行播放控制实例

    下一篇：浅谈利用缓存来优化HTML5 Canvas程序的性能一张图看懂移动HTML5前端性能优化

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网