Tutoriel sur la création d'une horloge numérique avec les astuces du didacticiel HTML5_html5

C’était cette horloge numérique. Je pensais que c’était une bonne idée à l’époque, mais je ne m’en suis pas soucié. Jusqu'à hier, mon collègue a vu ce cas sur Internet. Il l'a trouvé très cool, alors il est venu me demander comment cela était mis en œuvre. Ensuite, j'ai réfléchi à la méthode de mise en œuvre et je me suis un peu intéressé, alors j'ai passé du temps à l'imiter. il. J'en ai fait un. La différence est que Cen An utilise div pour le créer. Et je l'ai fait en utilisant de la toile. Il sera préférable d'utiliser canevas pour les performances, car juste pour contrôler le mouvement de chaque point, utiliser js pour contrôler l'attribut de style de dom manque définitivement de performances par rapport à l'utilisation de js pour contrôler le dessin du canevas.

Jetons d'abord un coup d'œil à la DÉMO que j'ai réalisée, puis décrivons brièvement la méthode pour procéder : S'il vous plaît, piquez-moi pour voir la DÉMO.

L'idée de faire cela est très simple, qui est de sauvegarder la position de chaque numéro via une chaîne :
Copier le code

Code XML/HTMLCopier le contenu dans le presse-papiers

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 signifie pas de pixels, 1 signifie qu'il y a des pixels, / est pour une meilleure apparence, c'est une branche. Pour faire simple : par exemple, 0 vaut :

.

　

Code XML/HTMLCopier le contenu dans le presse-papiers

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

Cela devrait être très clair. Il existe également un nombre : de 0 à 9, qui est représenté par une chaîne.

Ensuite, écrivez un objet particule, qui est un pixel :

Code XML/HTMLCopier le contenu dans le presse-papiers

1. var P_radius = 8,Gravité = 9.8 ;   
2.         var Particule = fonction(){   
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.         Particule.prototype = {   
12.             constructeurs : Particule,   
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 = couleur;   
25.                 this.visible = vrai;   
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 = ce.vy Gravity*time ;   
39.   
40.                     if(this.y>=canvas.height-P_radius){   
41.                         this.y = toile.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是重置（ Mise à jour de isDrop Mise à jour de la mise à jour de la toile sur toile false子容器中保存起来等待下一次调用。

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

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

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

1. fonction drawBg(){   
2.             var tx = (canvas.width-((P_radius*2 X_J)*4*8 7*xjg))/2;   
3.             pour(var i=0;i<8;i ){   
4.                 var ty = (canvas.height-((P_radius yjg)*6))/2;   
5.                 pour(var j=0;j<numData[0].length;j ){   
6.                     var tt = numData[0].charAt(j);   
7.                     if(tt==="/"){   
8.                         ty =yjg;   
9.                      }autre {   
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.         }   

Dessinez d'abord l'arrière-plan dans un canevas hors écran et mettez-le en cache. Ensuite, aucun calcul logique n'est nécessaire lors du redessinage de chaque image. Dessinez simplement le canevas hors écran. La logique ci-dessus ne devrait pas être difficile à comprendre. Il s'agit de parcourir 8 nombres à travers deux boucles, puis de dessiner chaque nombre point par point. Lorsque "/" est rencontré, cela signifie qu'une nouvelle ligne est requise et le ty dessiné. Ajoutez un intervalle de nouvelle ligne, réinitialisez l'émission, puis dessinez. Ainsi, tous les points peuvent être dessinés. Le rendu est le suivant :

Une fois l'arrière-plan dessiné, commencez à dessiner des pixels numériques en fonction de chaque seconde. La méthode principale est la suivante :

Code XML/HTMLCopier le contenu dans le presse-papiers

1. fonction setTime(time){   
2.             var h = heure.getHours() "",   
3.                 m = heure.getMinutes() "",   
4.                 s = heure.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,couleur = "";   
11.             pour(var i=0;i<nowdate.length;i ){   
12.                 var n = date actuelle.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.                     cas 2:couleur = "#4062E0";pause;   
20.                     cas 3:couleur = "#D65050";pause;   
21.                     cas 5:couleur = "#4062E0";pause;   
22.                     cas 6:couleur = "#797C17";pause;   
23.                 }   
24.   
25.                 pour(var j=0;j<text.length;j ){   
26.                     var tt = text.charAt(j);   
27.                     if(tt==="/"){   
28.                         ty =yjg;   
29.                      }autre{   
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.                                 utile = 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.         }  

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

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

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

1. var timeCount_0 = 0,timeCount_1 = 0 ,particules = [];   
2.         function initAnimate(){   
3.             pour(var i=0;i<200;i ){   
4.                 var p = nouveau Particule();   
5.                 particles.push(p);   
6.              }   
7.   
8.             timeCount_0 = nouveau Date();   
9.             timeCount_1 = nouveau 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 = nouveau 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
35. RAF(animer)
36.                                                                                

Effectuer l'initialisation de l'animation dans initAnimate. L'initialisation signifie d'abord instancier deux cents objets de particules et les placer dans un conteneur de particules pour les enregistrer, puis mettre à jour l'horodatage, mettre en cache l'arrière-plan, définir l'heure actuelle, puis appeler le corps de la boucle d'animation animée. pour démarrer l'animation.

La logique dans animer est également très simple. Obtenez l'horodatage Si la différence de temps entre les deux horodatages est supérieure ou égale à 1 seconde, setTime est effectué. L'étape suivante consiste à parcourir et redessiner toutes les particules visualisées dans le conteneur de particules.

Alors c'est fait :

Il existe encore de nombreuses zones qui peuvent être optimisées pour cet effet, car l'horloge et les minutes bougent relativement rarement, donc ces deux éléments peuvent être mis en cache, et lorsqu'il n'y a aucune action, il suffit de dessiner directement les données mises en cache. nombre d'appels d'API de dessin pour chaque image de la scène, ce qui améliorera certainement les performances. Cependant, il n'y a pas beaucoup de particules maintenant, et deux à trois cents objets particules suffisent. Si l'optimisation n'est pas effectuée, l'animation peut toujours se dérouler sans problème. L’affiche originale était donc juste un peu paresseuse.

Adresse du code source :

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