recherche

Maison  >  Article  >  interface Web  >  Le canevas HTML5 réalise l'effet spécial des chutes de flocons de neige_html5 compétences du didacticiel

Le canevas HTML5 réalise l'effet spécial des chutes de flocons de neige_html5 compétences du didacticiel

WBOY
WBOYoriginal
2016-05-16 15:51:471655parcourir

J'ai vu de nombreux affichages sur Internet montrant l'effet des flocons de neige HTML5 volant, ce qui est en effet très fascinant, je crois que tout le monde est aussi excité que moi et est également très curieux et veut étudier comment implémenter le code ; ceux-ci peuvent être téléchargés à partir de nombreux endroits Code source, mais je ne connais pas les idées des autres et l'analyse des difficultés lors de la réalisation de telles animations.

Il m'est arrivé d'étudier beaucoup ces jours-ci, et je profite du temps présent pour décortiquer étape par étape l'analyse de la demande, les points de connaissances et la programmation si j'essaie de me ridiculiser devant. toi, s'il te plaît, ne ris pas.

Le rendu final est le suivant :

Photo 1

1. Analyse de la demande

1. Flocon de neige rond

La forme du flocon de neige dans cet exemple utilise un cercle

2. Le nombre de flocons de neige est fixe

Observez attentivement le nombre de flocons de neige blancs selon la figure 1. Pendant le processus de chute, le nombre de flocons de neige dans l'ensemble de l'image doit être fixé. Cette exigence doit être obtenue grâce à notre observation et analyse. Cela correspond à la scène que nous voyons dans la vraie vie où des flocons de neige volent partout dans le ciel.

3. La taille des flocons de neige est incohérente

Chaque flocon de neige a une taille différente, ce qui signifie que le rayon du flocon de neige est aléatoire. Cela concorde avec la scène où l’on voit des flocons de neige voler partout dans le ciel dans la vraie vie.

4. La position des flocons de neige bouge

Les flocons de neige tombent et, naturellement, leurs positions bougent également.

2. Points de connaissances

1. Utilisez Html5 Canvas JavaScript pour dessiner un cercle - formant un flocon de neige circulaire

En HTML5, vous devez utiliser Canvas et utiliser JavaScript pour dessiner un cercle afin de former un flocon de neige circulaire - arc(x, y, r, start, stop

);

2. Nombres aléatoires : générez des flocons de neige circulaires avec différents rayons et coordonnées

Dans cet exemple, lorsque la page Web est chargée pour la première fois, un certain nombre de flocons de neige avec des rayons et des positions différents doivent être générés, donc le rayon et les coordonnées sont des nombres aléatoires tandis que les flocons de neige tombent, leur rayon ; reste inchangé et les coordonnées changent dans une certaine plage, donc les coordonnées sont également des nombres aléatoires à ce moment——Math.random()

.

3. Programmation

1.Préparation

Mettez une toile et définissez la couleur de fond de tout le corps sur noir

Code HTML :

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. <toile id="mycanvas" >
  2. Votre navigateur ne prend pas en charge le canevas
  3. toile> 

Code CSS :

Code CSSCopier le contenu dans le presse-papiers
  1. * {
  2. marge :
  3. rembourrage :
  4. }
  5.                                                        
  6. #mycanvcomme { 
  7. fond : noir ;
    8. }
L'effet à ce moment est le suivant :

Remarque : le canevas a une hauteur et une largeur initialisées par défaut, vous n'avez donc pas à vous en soucier

2. La toile remplit l'écran

Le code JavaScript est le suivant :

Code JavaScript
Copier le contenu dans le presse-papiers
  1. //Obtenir la toile mycanvas
  2. var can = document.getElementById("mycanvas"
    3. );
  3. var ctx = can.getContext("2d"
    4. );
  4. //Largeur de la toile
  5. var wid = window.innerWidth;
  6. //Hauteur de la toile
  7. var hei = window.innerHeight
  8. can.width=wid;
  9. can.height=hei

L'effet à ce moment est le suivant :

3. L'initialisation génère un nombre fixe de flocons de neige

Selon notre analyse de la demande ci-dessus et notre interprétation des points de connaissance, tout d'abord, le nombre de flocons de neige est fixe, nous devons donc définir une variable var snow = 100 ; ici, on suppose que le nombre de flocons de neige est de 100 ;

Lors de la génération de flocons de neige, le rayon et la position de chaque flocon de neige sont différents. Nous considérons chaque flocon de neige comme un objet, alors les propriétés de cet objet incluent : le rayon, les coordonnées (X, Y), puis un objet flocon de neige peut être écrit comme var snowOject={x:1,y:10,r:5}, représente ici un flocon de neige circulaire avec des coordonnées (1,10) et un rayon 5 ; dans cet exemple, puisque le rayon et les coordonnées sont des nombres aléatoires, Math est utilisé. random() génère respectivement un rayon et des coordonnées (X, Y) pour 100 flocons de neige ;

Ensuite, nous avons ici 100 flocons de neige, donc afin de faciliter les opérations ultérieures, nous utilisons un tableau pour sauvegarder ces 100 objets flocon de neige.

Le code JavaScript est le suivant :

Code JavaScriptCopier le contenu dans le presse-papiers
  1. //Nombre de flocons de neige
  2. var neige = 100
  3. //Coordonnées du flocon de neige, rayon
  4. var arr = []; //Enregistrez les coordonnées et le rayon de chaque cercle
  5. pour (var i = 0; i < neige; i ) {
  6. arr.push({
  7. x : Math.random() * wid,
  8. y : Math.random() * salut,
  9. r : Math.random() * 10 1
  10. })
  11. }


4. Dessine des flocons de neige

Nous avons généré 100 rayons de flocon de neige et coordonnées (X, Y) ci-dessus. Ce qui suit consiste à utiliser un canevas pour dessiner des flocons de neige (ici, nous dessinons des cercles). Ici, nous définissons une fonction

.

Le code JavaScript est le suivant :

Code JavaScriptCopier le contenu dans le presse-papiers
  1. //Dessiner des flocons de neige
  2. fonction DrawSnow() {
  3. ctx.fillStyle="blanc"
  4. ctx.beginPath();
  5.  pour (var i = 0; i < neige; i ) {
  6. var p = arr[i];
  7. ctx.moveTo(p.x,p.y);
  8. ctx.arc(p.x,py,p.r,0,2*Math.PI,false
    9. );
  9. }
  10. ctx.fill();
  12. ctx.closePath();

Appelez ensuite la fonction DrawSnow(), l'effet est le suivant :

Vous pouvez essayer d'actualiser la page Web plusieurs fois pour voir si des flocons de neige de différentes tailles et positions seront générés (normalement, c'est possible. Une fois que vous faites cela, vous êtes proche de l'effet final

).

Remarque : Comme 100 cercles doivent être dessinés ici, les coordonnées de début du dessin sont redéfinies à chaque fois qu'un cercle est dessiné : ctx.moveTo(p.x,p.y); sinon des effets étranges se produiront. essayez-le

5. Flocons de neige flottant

Nous avons dessiné 100 flocons de neige ci-dessus. Malheureusement, nous ne pouvons voir l'effet changeant qu'en actualisant la page Web, mais ce que nous devons réaliser, c'est que les flocons de neige continuent de bouger.

Nous devons d'abord utiliser la fonction setInterval pour redessiner continuellement les flocons de neige. L'intervalle ici est de 50 millisecondes : setInterval(DrawSnow,50);

En même temps, les coordonnées (X, Y) de chaque flocon de neige doivent être constamment modifiées (dans une certaine plage). Les flocons de neige tombent ici du coin supérieur gauche vers le coin inférieur droit, donc les valeurs des coordonnées X et Y. ​​​​de chaque flocon de neige sont en constante augmentation, puis nous utilisons une fonction SnowFall() pour définir les règles de chute des flocons de neige

Le code de fonction est le suivant :

Code JavaScriptCopier le contenu dans le presse-papiers
  1. //雪花飘落   
  2. fonction SnowFall() {   
  3.     pour (var i = 0; i < neige; i ) {   
  4.         var p = arr[i];   
  5.         p.y  = Math.random() * 2   1 ;   
  6.         si (p.y > hei) {   
  7.             p.y = 0 ;   
  8.         }   
  9.         p.x  = Math.random() * 2   1 ;   
  10.         if (p.x > wid) {   
  11.             p.x = 0 ;   
  12.     "white-space:pre">    }   
  13.     }   
  14. }  


然后将该函数放入DrawSnow()执行，注意：我们每隔50毫毛重画雪花，必须擦除画布，所以DrawSnow()函La fonction clearRect() est la suivante : ctx.clearRect(0, 0, wid, hei);

此时DrawSnow函数定义如下：

Code JavaScript复制内容到剪贴板
  1. //画雪花   
  2. fonction DrawSnow() {   
  3.     ctx.clearRect(0, 0, wid, hei);   
  4.     ctx.fillStyle = "blanc";   
  5.     ctx.beginPath();   
  6.     pour (var i = 0; i < neige; i ) {   
  7.         var p = arr[i];   
  8.         ctx.moveTo(p.x, p.y);   
  9.         ctx.arc(p.x, p.y, p.r, 0, 2 * Math.PI, false);   
  10.     }   
  11.     ctx.fill();   
  12.     SnowFall();   
  13.     ctx.closePath();   
  14. }   

最后执行setInterval(DrawSnow, 50); 

OK,

完整代码如下（大家可以直接复制到自己项目中执行，测试下效果）：

Code XML/HTML复制内容到剪贴板
  1. >  
  2. <html>  
  3.   
  4.     <tête>  
  5.         <méta charset="utf- 8" />  
  6.         <titre>titre>  
  7.         <script src="js/ jquery-1.8.3.min.js">script>  
  8.         <style type="texte/ css">  
  9.             * {   
  10.                 marge : 0 ;   
  11.                 remplissage : 0 ;   
  12.             }   
  13.                
  14.             #mycanvas {   
  15.                 fond : noir ;   
  16.              }
  17. style>
  18.  tête> 
  20. <corps>
  21.  <toile id="mycanvas" >
  22. Votre navigateur ne prend pas en charge le canevas
  23. toile>
  24. <script>
  25. //Obtenir la toile mycanvas
  26. var can = document.getElementById("mycanvas");
    27. var
  27. ctx = can.getContext("2d"); //Largeur de la toile
  28. var
    29. wid
  29. = fenêtre.innerWidth; //Hauteur de la toile
  30. var
    31. hei
  31. = fenêtre.innerHeight
    32. can.width
  32. = largeur
    33. can.height
  33. = hé //Nombre de flocons de neige
  34. var
    35. neige
  35. = 100 ; //Coordonnées du flocon de neige, rayon
  36. var
    37. arr
  37. = []; //Enregistre les coordonnées et le rayon de chaque cercle pour (var
    38. i
  38. = 0; je < neige; i ) { arr.push({
  39. x : Math.random() * wid,
  40.                     y：Math.random() * 嘿，  
  41.                     r: Math.random() * 10   1   
  42.                 })   
  43.             }   
  44.             //畫上雪花   
  45.             函數 DrawSnow() {   
  46.                 ctx.clearRect(0, 0, wid, hei);   
  47.                 ctx.fillStyle 🎜>                 ctx.beginPath();   
  48.                  for (var i
    49.  雪; 我) {                        var p                     ctx.moveTo(p.x, p.y);   
  49.                     ctx.arc(p.x, p.y, p.r, 0,                  }                    ctx.fill();   
    50.                 SnowFall();   
    51.                 ctx.closePath();   
    52.             }  
  52.             //雪花飄落   
  53.             函數 SnowFall() {   
  54.                  for (var i 雪; 我) {                        var p
  55.                     p.y  = Math.random() * 2   1;                        if (p.y                          
    56. p       
  57.                     }                        p.x  = Math.random() * 2   1;   
  58.                     if (p.x >                        以
  59.                     }   
  60.                 }   
  61.             }                setInterval(DrawSnow, 50);   
  62.         腳本> 🎜>>
    63.  🎜>
  63. > 
  64.     
  65. 身體>
  66.   
  67.      
  68. html>     
  70. 好了，今天分享就到這裡，希望對大家的學習有所幫助。 譯：http://www.cnblogs.com/tangyifeng/p/5253629.html
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Structure et sémantique de HTML5 (3) : compétences du didacticiel elements_html5 au niveau du bloc sémantiqueArticle suivant：Structure et sémantique de HTML5 (3) : compétences du didacticiel elements_html5 au niveau du bloc sémantique

Articles Liés

Voir plus