Tutorial zum Erstellen einer Digitaluhr mit HTML5_html5-Tutorial-Tipps

Es war diese Digitaluhr, die ich damals für eine gute Idee hielt, mich aber nicht darum gekümmert habe. Bis gestern hat mein Kollege diesen Fall im Internet gesehen. Er fand ihn sehr cool, also kam er vorbei und fragte mich, wie er umgesetzt wurde. Dann dachte ich über die Implementierungsmethode nach und wurde ein wenig interessiert, also verbrachte ich einige Zeit damit, ihn nachzuahmen es. Habe eins gemacht. Der Unterschied besteht darin, dass Cen An div verwendet, um es zu erstellen. Und ich habe es mit Leinwand gemacht. Aus Leistungsgründen ist es besser, Canvas zu verwenden, da die Verwendung von js zur Steuerung des Stilattributs von dom allein zur Steuerung der Bewegung jedes Punkts im Vergleich zur Verwendung von js zur Steuerung des Canvas-Zeichnens definitiv leistungsschwächer ist.

Schauen wir uns zuerst die DEMO an, die ich erstellt habe, und beschreiben dann kurz die Vorgehensweise: Bitte stupsen Sie mich an, um die DEMO zu sehen.

Die Idee hierfür ist sehr einfach: Die Position jeder Zahl wird durch eine Zeichenfolge gespeichert:
Code kopieren

XML/HTML-CodeInhalt in die Zwischenablage kopieren

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 bedeutet keine Pixel, 1 bedeutet, dass Pixel vorhanden sind, / dient der besseren Darstellung, es handelt sich einfach um einen Zweig: 0 bedeutet beispielsweise:

　

XML/HTML-CodeInhalt in die Zwischenablage kopieren

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

Das sollte es sehr deutlich machen. Es gibt auch eine Zahl von 0 bis 9, die durch eine Zeichenfolge dargestellt wird.

Schreiben Sie dann ein Partikelobjekt, das ein Pixel ist:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. var P_radius = 8,Schwerkraft = 9.8;   
2.         var Partikel = Funktion(){   
3.             this.x = 0;   
4.             this.y = 0;   
5.             this.vx = 0;   
6.             this.vy = 0;   
7.             diese.farbe = "";   
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.                 =0,5?-vx : vx;                },   
32.             update:function(time){        //每一帧的动作   
33.                 if(this.drop){   
34.                     this.x  = this.vx*time;   
35.                     this.y  = this.vy*time;   
36.   
37.                     var vy = dies.vy Schwerkraft*Zeit;   
38.   
39.                     if(this.y>=canvas.height-P_radius){   
40.                                                  vy = -vy*0,7;   
                    }   
41.   
                    
42. this.vy
 = vy;   
  
44.                     if(this.x
-P_radius
45. ||this.x
>
46. canvas.width P_radius||this.y-P_radius||this.y>canvas.height P_radius){                                                    }   
                }   
47.             }            }　　   
  
49. 粒子对象的属性比较简单 ， 就位置 ， 速度 ， 以及是否可视化。方法的话 ， Paint 是绘制方法 ， Zurücksetzen 是重置（因为粒子要循环利用的 ， 提升性能） ， isdrop 是粒子落下方法 ， Update就是每一帧更新粒子的动作, update中当粒子运动超出canvas的绘制区域时, 就把它的可视化置为false, 在粒子容器中保存起来等待下一次调用.
　　写好粒子对象后，就要考虑如何让粒子按照位置画上去，同时当粒子不需要用时能够让他做自由落体的动画了.
50. 　　先画背景（也就是那没有像素的白点）:
51. XML/HTML-Code
52. 复制内容到剪贴板
    1. Funktion drawBg(){   
    2.             var tx = (canvas.width-((P_radius*2 X_J)*4*8 7*xjg))/2;   
    3.             for(var i=0;i8;i ){   
    4.                 var ty = (canvas.height-((P_radius yjg)*6))/2;   
    5.                 for(var j=0;jnumData[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.                                                                                    bgctx.beginPath();   
    12.                         bgctx.arc(x,y,P_radius,0,2*Math.PI);                            bgctx.fill();                        }   
    13.                 }   
    14.                 tx =xjg 4*(P_radius*2 X_J);   
    15.             }   
    16.         }   

    17. Zeichnen Sie zuerst den Hintergrund in eine Off-Screen-Leinwand und speichern Sie ihn. Dann ist beim Neuzeichnen jedes Frames keine logische Berechnung erforderlich. Die obige Logik sollte nicht schwer zu verstehen sein. Sie besteht darin, 8 Zahlen durch zwei Schleifen zu durchlaufen und dann jede Zahl Punkt für Punkt zu zeichnen Fügen Sie ein Zeilenumbruchintervall hinzu, setzen Sie tx zurück und zeichnen Sie dann. Einfach so können alle Punkte gezeichnet werden. Die Darstellung ist wie folgt:
        

        Nachdem der Hintergrund gezeichnet wurde, beginnen Sie mit dem Zeichnen digitaler Pixel entsprechend jeder Sekunde. Die Hauptmethode ist diese:
        

        XML/HTML-CodeInhalt in die Zwischenablage kopieren

        1. Funktion setTime(time){   
        2.             var h = Zeit.getHours() "",   
        3.                                                  h
        h
        4.  = h.length===1?"0" h:h;                
        m
        5. m = m.length===1?"0" m:m;                
        s
        6. s = s.length===1?"0" s:s;      
        7.             var nowdate = h :: m:: s;   
                    var 
        8. tx
         = (canvas.width-((P_radius*2 X_J)*4*8 7*xjg))/2,
        9. Farbe = "";   
                    for(var 
        10. i=0;inowdate.length;i ){   
        11.                 var n = nowdate.charAt(i)===":"?10:parseInt( nowdate.charAt(i)),                           
          
        12.                 var ty = (canvas.height-((P_radius yjg)*6))/2;   
          
        13.                 switch(i){                        case 0:color
         = 
        14. "#4DCB74"
        ;break;   
        15.                     case 2:color
         = 
        16. "#4062E0"
        ;break;   
                            case 
        18. 3:color = "#D65050";break;   
        19.                     case 5:color = "#4062E0";break;   
        20.                     case 6:color = "#797C17";break;   
        21.                 }   
        22.   
        23.                 for(var j=0;jtext.length;j ){   
        24.                     var tt = text.charAt(j);   
        25.                     if(tt==="/"){   
        26.                         ty =yjg;   
        27.                     }else{   
        28.                        var x = tx j%5*(P_radius*2 X_J),   
        29.                                                                                                                  particles.forEach(function(p){   
        30.                            if(p.visible&p.x===x&p.y===y){   
        31.                                ppp = p;   
                                    }else if(!p.visible&usefullp===null){   
        32.                                  nützlichp = p;   
        33.                             }   
        34.                         });   
        35.                         if(pp!==null&tt==="0"){   
        36.                             pp.isDrop();   
        37.                         }else if(pp===null&tt==="1"){   
        38.                            usefullp.reset(x , y , color);   
        39.                         }   
        40.                     }   
        41.                 }   
        42.                 tx =xjg 4*(P_radius*2 X_J);   
        43.             }   
        44.         }  

        　　原理也不难,也是跟上面画背景差不多,遍历所有点,然后根据当前时间的数字转换成的字符串来判断, 当前点是否应该有像素, 如果有像素就再判断当前这个点是否已经有粒子对象在了, 如果已经有粒子对象在了, 就直接跳出不处理, 如果没有粒子对象在, 就再粒子容器中找一个没有被使用的粒子reset到这个位置.还有一种情况，就是

        　　时间设置也写好了，就可以写舞台更新的代码了：
        

        XML/HTML-Code复制内容到剪贴板

        1. var timeCount_0 = 0,timeCount_1 = 0 ,Partikel = [];   
        2.         function initAnimate(){   
        3.             for(var i=0;i200;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.             });
        33.  timeCount_1 = timeCount_2;
        RAF(animiert)
                                                                                       
        Durchführen der Animationsinitialisierung in initAnimate bedeutet, zunächst zweihundert Partikelobjekte zu instanziieren und sie in einen Partikelcontainer zu legen, um sie dann zu speichern, den Hintergrund zwischenzuspeichern, die aktuelle Zeit festzulegen und dann den Animationsschleifenkörper aufzurufen um die Animation zu starten.

        Die Logik in animate ist ebenfalls sehr einfach. Wenn der Zeitunterschied zwischen den beiden Zeitstempeln größer oder gleich 1 Sekunde ist, wird setTime ausgeführt. Der nächste Schritt besteht darin, alle visualisierten Partikel im Partikelbehälter zu durchlaufen und neu zu zeichnen.
        Dann ist es geschafft:

        
        Es gibt noch viele Bereiche, die für diesen Effekt optimiert werden können, da sich die Uhr und die Minuten relativ selten bewegen, sodass diese beiden zwischengespeichert werden können. Wenn keine Aktion erfolgt, können die zwischengespeicherten Daten einfach direkt abgerufen werden Anzahl der Zeichnungs-API-Aufrufe für jeden Frame der Bühne, was die Leistung definitiv verbessern wird. Allerdings gibt es jetzt nicht mehr viele Partikel und zwei- bis dreihundert Partikelobjekte reichen aus. Wenn keine Optimierung durchgeführt wird, kann die Animation immer noch reibungslos ablaufen. Das Originalplakat war also etwas faul.
        Quellcode-Adresse:

        https://github.com/whxaxes/canvas-test/blob/gh-pages/src/Funny-demo/coolClock/index.html