最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

用HTML5制作數(shù)字時鐘的教程

  發(fā)布時間：2015-05-11 16:59:50   作者：佚名   我要評論
這篇文章主要介紹了用HTML5制作數(shù)字時鐘的教程,主要利用HTML5中的Canvas API,需要的朋友可以參考下

2015511172231746.png (836×306)

就是這個數(shù)字時鐘，當(dāng)時覺得這個創(chuàng)意不錯，但是也沒去折騰。直到昨天同事又在網(wǎng)上看到這個案例，他覺得很酷炫，就跑過來問我，這個是怎么實(shí)現(xiàn)的，然后我大概想了一下實(shí)現(xiàn)方法后也來了點(diǎn)興趣，就花了一點(diǎn)時間模仿做出來了一個。不同的是，岑安用的是div來做的。而我就是用canvas來實(shí)現(xiàn)的。用canvas來做性能方面會更好，因為就單單操控每個點(diǎn)的運(yùn)動，用js控制dom的style屬性跟用js控制canvas繪圖相比性能方面肯定是有所欠缺的。

　　先上個我做的DEMO吧，然后再簡述一下做這個的方法：   看DEMO請戳我 。

　　做這個思路很簡單，就是通過字符串保存各個數(shù)字的位置：　
復(fù)制代碼

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  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復(fù)制內(nèi)容到剪貼板
  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還有一個：號都用字符串表示好。

　　然后就寫個粒子對象，也就是像素點(diǎn)：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  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是重置（因為粒子要循環(huán)利用的，提升性能），isDrop是粒子落下方法，update就是每一幀更新粒子的動作，update中當(dāng)粒子運(yùn)動超出canvas的繪制區(qū)域時，就把它的可視化置為false，在粒子容器中保存起來等待下一次調(diào)用。

　　寫好粒子對象后，就要考慮如何讓粒子按照位置畫上去，同時當(dāng)粒子不需要用時能夠讓他做自由落體的動畫了。

　　先畫背景（也就是那沒有像素的白點(diǎn)）：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  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.                 for(var j=0;j<numData[0].length;j++){   
  6.                     var tt = numData[0].charAt(j);   
  7.                     if(tt==="/"){   
  8.                         ty+=yjg;   
  9.                     }else {   
  10.                         var x = tx+j%5*(P_radius*2+X_J),   
  11.                             y = ty;   
  12.                         bgctx.fillStyle = "#FFF";   
  13.                         bgctx.beginPath();   
  14.                         bgctx.arc(x,y,P_radius,0,2*Math.PI);   
  15.                         bgctx.fill();   
  16.                     }   
  17.                 }   
  18.                 tx+=xjg+4*(P_radius*2+X_J);   
  19.             }   
  20.         }   

　　先把背景畫到一個離屏canvas中緩存起來，接下來每一幀重畫的時候就不需要邏輯計算了，直接把那個離屏canvas畫上去就行了。上面的邏輯應(yīng)該不難理解，就是通過兩個循環(huán)，循環(huán)8個數(shù)字，然后再對每個數(shù)字一個點(diǎn)一個點(diǎn)進(jìn)行繪制，當(dāng)遇到“/”時，就說明要換行了，把繪制的ty加個換行間隔，再把tx重置，再進(jìn)行繪制。就這樣，點(diǎn)就可以都畫出來了。效果圖如下：
2015511172757389.png (1282×350)

背景畫好了，就開始根據(jù)每一秒的時間，畫數(shù)字像素吧。方法主要是這個：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. function setTime(time){   
  2.             var h = time.getHours()+"",   
  3.                 m = time.getMinutes()+"",   
  4.                 s = time.getSeconds()+"";   
  5.             hh = h.length===1?"0"+h:h;   
  6.             mm = m.length===1?"0"+m:m;   
  7.             ss = s.length===1?"0"+s:s;   
  8.   
  9.             var nowdate = h+":"+m+":"+s;   
  10.             var tx = (canvas.width-((P_radius*2+X_J)*4*8+7*xjg))/2,color = "";   
  11.             for(var i=0;i<nowdate.length;i++){   
  12.                 var n = nowdate.charAt(i)===":"?10:parseInt(nowdate.charAt(i)),   
  13.                     text = numData[n];   
  14.   
  15.                 var ty = (canvas.height-((P_radius+yjg)*6))/2;   
  16.   
  17.                 switch(i){   
  18.                     case 0:color = "#4DCB74";break;   
  19.                     case 2:color = "#4062E0";break;   
  20.                     case 3:color = "#D65050";break;   
  21.                     case 5:color = "#4062E0";break;   
  22.                     case 6:color = "#797C17";break;   
  23.                 }   
  24.   
  25.                 for(var j=0;j<text.length;j++){   
  26.                     var tt = text.charAt(j);   
  27.                     if(tt==="/"){   
  28.                         ty+=yjg;   
  29.                     }else{   
  30.                         var x = tx+j%5*(P_radius*2+X_J),   
  31.                             y = ty,   
  32.                             pp = null,   
  33.                             usefullp = null;   
  34.                         particles.forEach(function(p){   
  35.                             if(p.visible&p.x===x&p.y===y){   
  36.                                 ppp = p;   
  37.                             }else if(!p.visible&usefullp===null){   
  38.                                 usefullp = p;   
  39.                             }   
  40.                         });   
  41.                         if(pp!==null&tt==="0"){   
  42.                             pp.isDrop();   
  43.                         }else if(pp===null&tt==="1"){   
  44.                             usefullp.reset(x , y , color);   
  45.                         }   
  46.                     }   
  47.                 }   
  48.                 tx+=xjg+4*(P_radius*2+X_J);   
  49.             }   
  50.         }  

　　原理也不難，也是跟上面畫背景差不多，遍歷所有點(diǎn)，然后根據(jù)當(dāng)前時間的數(shù)字轉(zhuǎn)換成的字符串來判斷，當(dāng)前點(diǎn)是否應(yīng)該有像素，如果有像素就再判斷當(dāng)前這個點(diǎn)是否已經(jīng)有粒子對象在了，如果已經(jīng)有粒子對象在了，就直接跳出不處理，如果沒有粒子對象在，就再粒子容器中找一個沒有被使用的粒子reset到這個位置。還有一種情況，就是當(dāng)前這個點(diǎn)是不應(yīng)該有像素的，但是卻有粒子，那就獲取這個粒子，讓這個粒子進(jìn)行自由落體。

　　時間設(shè)置也寫好了，就可以寫舞臺更新的代碼了：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. var timeCount_0 = 0,timeCount_1 = 0,particles = [];   
  2.         function initAnimate(){   
  3.             for(var i=0;i<200;i++){   
  4.                 var p = new Particle();   
  5.                 particles.push(p);   
  6.             }   
  7.   
  8.             timeCount_0 = new Date();   
  9.             timeCount_1 = new Date();   
  10.             drawBg();   
  11.             setTime(timeCount_0)   
  12.             animate();   
  13.         }   
  14.   
  15.         function animate(){   
  16.             ctx.clearRect(0,0,canvas.width,canvas.height);   
  17.             ctx.drawImage(bgcanvas,0,0);   
  18.   
  19.             var timeCount_2 = new Date();   
  20.   
  21.             if(timeCount_1-timeCount_0>=1000){   
  22.                 setTime(timeCount_1);   
  23.                 timeCount_0 = timeCount_1;   
  24.             }   
  25.   
  26.             particles.forEach(function(p){   
  27.                 if(p.visible){   
  28.                     p.update((timeCount_2-timeCount_1)/70);   
  29.                     p.paint();   
  30.                 }   
  31.             });   
  32.   
  33.             timeCount_1 = timeCount_2;   
  34.   
  35.             RAF(animate)   
  36.         }  

　　在initAnimate進(jìn)行動畫初始化，初始化也就是先實(shí)例化兩百個粒子對象放到粒子容器中保存起來，再更新時間戳，緩存背景，設(shè)置當(dāng)前時間，然后調(diào)用animate動畫循環(huán)主體開始動畫。

　　animate中的邏輯也很簡單了，獲取時間戳，如果兩個時間戳之間的時間差大于或等于1秒，就進(jìn)行setTime。而再下面的就是對粒子容器里的所有可視化的粒子進(jìn)行遍歷循環(huán)重繪了。
然后就做好啦：
2015511172909169.png (1263×507)

個效果還是有很多可以優(yōu)化的地方的，因為時鐘和分鐘都是動的比較少的，所以可以把這兩個緩存起來，當(dāng)沒有動作的時候就直接將緩存數(shù)據(jù)畫上去就行了，這樣就可以減少舞臺每一幀的繪圖API調(diào)用量，肯定是能提高性能的。不過現(xiàn)在畢竟粒子不多，兩三百個粒子對象也就夠用了，如果不去做優(yōu)化，動畫也還是能很流暢的運(yùn)行的。所以樓主就偷個小懶啦。

　　源碼地址：https://github.com/whxaxes/canvas-test/blob/gh-pages/src/Funny-demo/coolClock/index.html

相關(guān)文章

  • Html5 canvas實(shí)現(xiàn)粒子時鐘的示例代碼

    這篇文章主要介紹了Html5 canvas實(shí)現(xiàn)粒子時鐘的示例代碼,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-09-06

  • HTML寫一個網(wǎng)頁動態(tài)時鐘

    本文通過實(shí)例代碼給大家介紹了HTML寫一個網(wǎng)頁動態(tài)時鐘效果，需要的的朋友參考下吧
    2017-08-30

  • HTML5實(shí)現(xiàn)可縮放時鐘代碼

    本文通過實(shí)例代碼給大家介紹了基于html5實(shí)現(xiàn)的可縮放時鐘代碼，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧
    2017-08-28

  • 用HTML5的canvas實(shí)現(xiàn)一個炫酷時鐘效果

    下面小編就為大家?guī)硪黄肏TML5的canvas實(shí)現(xiàn)一個炫酷時鐘效果。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-05-20

  • 使用html5 canvas 畫時鐘代碼實(shí)例分享

    這篇文章主要介紹了使用html5 canvas 畫時鐘代碼實(shí)例分享的相關(guān)資料,需要的朋友可以參考下
    2015-11-11

  • html5繪制時鐘動畫

    這篇文章主要介紹了html5繪制時鐘動畫,需要的朋友可以參考下
    2014-12-15

  • html5時鐘實(shí)現(xiàn)代碼

    html5下實(shí)現(xiàn)的鬧鐘代碼，喜歡的朋友可以參考下。
    2010-10-22

  • HTML 羅盤式時鐘的實(shí)現(xiàn)

    看著有點(diǎn)黑科技的感覺就跟前段時間比較火的抖音動態(tài)時間那個一個效果，本文主要介紹了HTML 羅盤式時鐘的實(shí)現(xiàn)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們
    2021-05-20

最新評論

彭阳县| 贵南县| 通海县| 阿瓦提县| 霍城县| 西乡县| 铅山县| 自治县| 高唐县| 舞钢市| 柘城县| 甘洛县| 永年县| 阳春市| 宁河县| 治县。| 丰原市| 昌图县| 汕头市| 永宁县| 宁南县| 黄骅市| 青冈县| 新余市| 阳西县| 安庆市| 新干县| 阜新市| 疏附县| 阜新市| 天祝| 霸州市| 杂多县| 随州市| 广饶县| 曲靖市| 花垣县| 钟祥市| 天门市| 新疆| 通化县|