Exemples de code pour implémenter une animation normale et une animation de particules dans le canevas

Canvas est utilisé pour dessiner des images et des animations sur des pages Web. Il peut être compris comme un canevas, et l'effet souhaité est construit sur ce canevas.

Canvas peut dessiner des effets dynamiques. En plus des animations régulières couramment utilisées, le concept de particules peut également être utilisé pour obtenir des effets dynamiques plus complexes. Cet article utilise des effets dynamiques ordinaires et des effets spéciaux de particules pour implémenter une horloge simple.

L'animation ordinaire utilise l'API Canvas pour réaliser des modèles et des animations réguliers.

Effet

L'effet est relativement simple à réaliser. Nous analysons principalement la mise en œuvre du décalage d'angle entre l'échelle et le pointeur.

Cet exemple est le dessin de l'échelle des heures : il y a 12 heures sur le cadran, Math.PI est à 180°, et chaque heure occupe 30°.

.save() signifie enregistrer l'état de l'environnement de canevas actuel et dessiner sur cette base. Une fois le dessin terminé, l'état du chemin et les attributs précédemment enregistrés sont renvoyés.

Il en va de même pour l'échelle des minutes, il suffit de changer l'angle et le style.

 // Échelle de temps horaire offscreenCanvasCtx.save(); for (var i = 0; i < 12; i++) { offscreenCanvasCtx.beginPath(); // Échelle de couleur offscreenCanvasCtx.strokeStyle = '#fff'; lineWidth = 3; // Occupe 30° toutes les heures hors écranCanvasCtx.rotate(Math.PI / 6); // La position de départ du dessin offscreenCanvasCtx.lineTo(140, 0) // La position de fin du dessin ; offscreenCanvasCtx.lineTo(120, 0); // Le chemin du dessin offscreenCanvasCtx.stroke( } offscreenCanvasCtx. restaurer() ;

Prenons l'exemple de la trotteuse : obtenez les secondes de l'heure actuelle et calculez l'angle de décalage correspondant

 var now = new Date(), sec = now.getSeconds(), min = now.getMinutes(), hr = now.getHours(); hr = hr > 12 ? hr - 12 : hr; enregistrer (); offscreenCanvasCtx.rotate(sec * (Math.PI / 30) ...... offscreenCanvasCtx.Stroke();

Canvas peut être utilisé pour dessiner des animations complexes et irrégulières. Les effets de particules peuvent être utilisés pour obtenir des effets dynamiques complexes et aléatoires.

Les particules font référence à chaque pixel des données d'image imageData . Après avoir obtenu chaque pixel, ajoutez des attributs ou des événements pour interagir avec les particules de la zone afin d'obtenir des effets dynamiques.

Effet

Prenons l'exemple de la conversion d'image dans la figure ci-dessous. L'effet est d'abord de restituer l'image sur le canevas, puis d'obtenir chaque pixel dans la zone où se trouve le texte.

 let image = new Image(); image.src='../image/logo.png'; let pixels=[]; //Stockage des données de pixels let imageData; Rendre l'image et obtenir les informations sur les pixels dans la zone image.onload=function(){ ctx.drawImage(image,(canvas.width-image.width)/2,(canvas.height-image.height)/2,image.width,image.height) image.width)/2,(canvas.height-image.height)/2,image.width,image.height); //Obtenir des informations sur les pixels du graphique //Dessiner une image} ;

La taille de l'image est de 300*300, avec un total de 90 000 pixels. Chaque pixel occupe 4 bits et stocke les données rgba.

 function getPixels(){ var pos=0; var data=imageData.data; //Données de tableau unidimensionnel de RGBA //La hauteur et la largeur de l'image source sont de 300 px pour (var i=1;i<=image. width;i++ ){ for(var j=1;j<=image.height;j++){ pos=[(i-1)*image.width+(j-1)]*4; //Obtenir la position du pixel if(data[pos]>=0){ var pixel={ x:(canvas.width-image.width)/2+j+Math.random()*20, //Réinitialiser chaque pixel informations de position y : (canvas.height-image.height)/2+i+Math.random()*20, //Réinitialiser les informations de position de chaque pixel fillStyle:'rgba('+data[pos]+','+(data[pos+1])+','+(data[pos+2])+', ' +(data[pos+3])+')' } pixels.push(pixel); } } } } function drawPixels() { var canvas = document.getElementById(myCanvas); canvas.getContext(2d); ctx.clearRect(0,0,canvas.width,canvas.height); var len = pixels.length, curr_pixel = null; pour (var i = 0; i < len; i++) { curr_pixel = pixels[i]; ctx.fillStyle = curr_pixel.fillStyle; ctx.fillRect(curr_pixel.x, curr_pixel.y, 1, 1); } }

Rendre l'horloge du texte

 function time() { ctx.clearRect(0,0,canvas.width,canvas.height) ctx.font = 150px bold; ctx.textBaseline='top'; ctx.fillStyle = rgba(245,245,245,0.2); (nouveau Date().format('hh:mm:ss'),(canvas.width-textWidth)/2,(canvas.height-textHeight)/2,textWidth,textHeight }

Effet

Le concept de particules de conversion de texte est le même que ci-dessus. Les pixels de la zone sélectionnée sont obtenus, sélectionnés en fonction des conditions de filtre et stockés dans le tableau. Redessiner après le parcours.

 function getPixels(){ let imgData = ctx.getImageData((canvas.width-textWidth)/2,(canvas.height-textHeight)/2,textWidth,textHeight); i=1;i<=textHeight;i++){ for(let j=1;j<=textWidth;j++){ pos=[(i-1)*textWidth+(j-1)]*4; //Obtenir la position du pixel if(data[pos]>=0){ var pixel={ x:j+Math.random()* 20 , //Réinitialiser les informations de position de chaque pixel y:i+Math.random()*20, //Réinitialiser les informations de position de chaque pixel fillStyle:'rgba('+data[pos]+','+(data[pos+1])+','+(data[pos+2])+', ' +(données[pos+3])+')' }; pixelsArr.push(pixel);

imgData enregistre les informations sur les pixels dans la zone sélectionnée, chaque pixel occupe 4 bits et enregistre les informations RGBA sur quatre bits. En filtrant le quatrième bit de chaque pixel, ce code enregistre tous les pixels avec une transparence différente de 0 dans le tableau pixelsArr .

x et y enregistrent les informations de position de la particule. Afin de produire l'effet de mouvement dans le rendu, une position de décalage de 0 à 20 pixels est ajoutée à chaque particule. Chaque fois qu'elle est redessinée, la position de décalage est générée de manière aléatoire pour générer. mouvement.

Après avoir obtenu les particules, vous devez effacer le texte original dans le canevas et redessiner les particules obtenues sur le canevas.

 function drawPixels() { // Effacer le contenu du canevas et redessiner ctx.clearRect(0,0,canvas.width,canvas.height); for (let i in pixelsArr) { ctx.fillStyle = pixelsArr[i].fillStyle; r = Math.random()*4 ctx.fillRect(pixelsArr[i].x, pixelsArr[i].y, r, r); } }

Le style de redessin des particules est la couleur et la transparence d'origine lors du filtrage des pixels, et lorsque chaque particule est dessinée sur le canevas, le paramètre de taille r est défini et la valeur de r est un nombre aléatoire de 0 à 4. Les particules résultantes sont de taille aléatoire.

Après avoir obtenu les particules et redessiné avec succès, la page doit être actualisée en temps réel. La méthode window.requestAnimationFrame(callback) est utilisée ici.

 function time() { ...... getpixels(); //Obtenir les particules drawPixels(); // Redessiner les particules requestAnimationFrame(time);

La méthode window.requestAnimationFrame(callback) indique au navigateur que vous souhaitez effectuer une animation et demande au navigateur d'appeler la fonction spécifiée pour mettre à jour l'animation avant le prochain redessin. Cette méthode prend en paramètre une fonction de rappel, qui sera appelée avant le redessinage du navigateur.

Cette méthode n'a pas besoin de définir l'intervalle de temps et la fréquence d'appel adopte l'intervalle de temps du système (1 s).

Explication du document cliquez ici

Effet

Cet article réalise principalement l'effet dynamique de l'horloge de deux manières différentes, parmi lesquelles l'horloge à particules a plus d'opérabilité. Dans la future série de toiles, des effets plus dynamiques seront implémentés pour le système de particules.

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.