Cet article présente le code d'implémentation du texte Canvas à l'effet de particules et le partage avec tout le monde. J'espère qu'il sera utile à tout le monde. Les détails sont les suivants :
Dessiner du texte à travers des particules semble intéressant, et faire correspondre le mouvement des particules rendra l'effet encore plus cool. Cet article explique comment dessiner du texte à travers des particules dans le canevas.
Principe de mise en œuvreD'une manière générale, il est très simple de transformer le texte en affichage de particules. Le principe de mise en œuvre est d'utiliser deux canevas. L'un est le canevas A que l'utilisateur ne peut pas voir, et l'autre est le canevas. celui que l'utilisateur peut voir. Le canevas B obtenu est utilisé pour générer des particules basées sur les données textuelles de A. La représentation visuelle est celle indiquée sur la figure :
Créer un canevas hors écranLe HTML doit uniquement être placé sur le canevas principal :
<!-- Structure HTML--><html><head> ...</head><body> <canvas id=stage></canvas></body></html>
Créez ensuite un canevas hors écran et dessinez du texte :
const WIDTH = window.innerWidth; const HEIGHT = window.innerHeight; const offscreenCanvas = document.createElement('canvas'); const offscreenCanvas.getContext('2d'); offscreenCtx.font = '100px PingFang SC';offscreenCtx.textAlign = 'center';offscreenCtx.baseline = 'middle';offscreenCtx.fillText('Bonjour', LARGEUR / 2, HAUTEUR / 2);Rien ne se passe sur la page pour le moment, mais vous pouvez réellement l'imaginer sur le canevas hors écran. Cela devrait être comme indiqué sur la figure :
Méthode principale getImageData À l'aide de la méthode getImageData du canevas, vous pouvez obtenir un objet ImageData , qui est utilisé pour décrire les données de pixels dans la zone spécifiée du canevas. En d’autres termes, nous pouvons obtenir la position et la couleur de chaque pixel du texte Hello, et nous pouvons générer des particules à l’emplacement spécifié. L’effet final est que les particules sont reconstituées en texte.
Pour obtenir des informations sur les pixels, vous devez utiliser l'attribut data de l'objet ImageData , qui répartit les valeurs rgba de tous les pixels dans un tableau. Chaque pixel a quatre valeurs rgba. Le nombre de ce tableau est 像素点数量* 4 .
Supposons que je sélectionne une zone 3 * 4 , il y a alors un total de 12 pixels, chaque pixel a quatre valeurs rgba, donc le tableau de données aura 12 * 4 = 48 éléments.
Si vous imprimez les données, vous pouvez voir le rgba de ces pixels disposés de gauche à droite et de haut en bas.
Bien entendu, la zone que nous voulons obtenir doit contenir du texte, nous devons donc obtenir toute la zone de canevas hors écran :
const imgData = offscreenCtx.getImageData(0, 0, WIDTH, HEIGHT).data;Générer des particules
Après avoir obtenu ImageData, en parcourant le tableau de données, vous pouvez déterminer quels points du canevas hors écran sont colorés (au milieu du texte) et quels points sont incolores (pas sur le texte), et mettre ces pixels colorés. en bas de la position, puis générez des particules sur le canevas principal, et vous êtes prêt à partir.
Créez d’abord une classe de particules :
class Particle { constructor (options = {}) { const { x = 0, y = 0, color = '#fff', radius = 5} = options; = y; this.color = color; } draw (ctx) { ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, false); ctx.fillStyle = this.color; ctx.closePath();En parcourant les données, nous pouvons déterminer si le pixel est dans le texte en fonction de la transparence, c'est-à-dire si le quatrième élément de rgba n'est pas 0.
const particules = [];const skip = 4;for (var y = 0; y < HAUTEUR; y += sauter) { for (var x = 0; x < LARGEUR; x += sauter) { var opacityIndex = (x + y * LARGEUR) * 4 + 3; if (imgData[opacityIndex] > 0) { particules.push(new Particle({ x, y, rayon : 1, couleur : '#2EA9DF' })); Nous utilisons particles pour stocker toutes les particules. La fonction de skip ici est la taille du pas du parcours. Si nous numérisons pixel par pixel, les particules qui finiront par reconstituer le texte seront très denses. les particules seront générées seront plus rares.
Enfin, créez le canevas principal et dessinez-le :
const canvas = document.querySelector('#stage');canvas.width = WIDTH;canvas.height = HEIGHT;const ctx = canvas.getContext('2d');for (const particule de particules) { particule.draw(ctx );}L'effet est le suivant :
Pour le code complet, voir 01-basic-text-to-particles
Ajouter des effetsAprès avoir compris le principe de mise en œuvre, le reste consiste en fait à ajouter quelques effets d'animation aux particules. Tout d’abord, vous pouvez donner aux particules un déplacement aléatoire pour éviter de paraître trop soignées.
const particules = [];const skip = 4;for (var y = 0; y < HAUTEUR; y += sauter) { for (var x = 0; x < LARGEUR; x += sauter) { var opacityIndex = (x + y * WIDTH) * 4 + 3; if (imgData[opacityIndex] > 0) { // Ajout d'un déplacement aléatoire lors de la création de particules particules.push(new Particule({ x : x + Math.random() * 6 - 3, y : y + Math.random() * 6 - 3, rayon : 1, couleur : '#2EA9DF' }));L'effet est le suivant :
Si vous souhaitez obtenir un effet plus important, tel que :
Comment mettre en œuvre cela ? Tout d’abord, vous devez générer de manière aléatoire la taille des particules. Cela nécessite uniquement de randomiser le rayon lors de la création des particules. De plus, si vous souhaitez que le rayon de la particule change dynamiquement, vous devez distinguer le rayon de rendu de la particule et le rayon initial, et utiliser requestAnimationFrame pour le rendu de l'animation :
class Particle { constructor (options = {}) { const { x = 0, y = 0, color = '#fff', radius = 5} = options; this.radius = radius; radius; // Ajouter une propriété DynamicRadius} draw (ctx) { // ... ctx.arc(this.x, this.y, this.dynamicRadius, 0, 2 * Math.PI, false); Remplacer par DynamicRadius // ... } update () { // TODO }}requestAnimationFrame(function loop() { requestAnimationFrame(loop); ctx.fillStyle = '#fff'; ctx.fillRect(0, 0, WIDTH, HEIGHT ); for (particule const de particules) { particule.update(); particule.draw(ctx }}); Ensuite, la clé réside dans la manière de mettre en œuvre la méthode update des particules. Supposons que nous souhaitions que le rayon des particules change de manière fluide et cyclique de 1 à 5. Il est facile de penser à des fonctions trigonométriques, telles que :
L'axe horizontal doit être lié au temps. Vous pouvez conserver une variable et l'ajouter à chaque fois que vous appelez update. Vous pouvez également utiliser l'horodatage pour la calculer simplement. Un exemple de méthode update est le suivant :
update () { this.dynamicRadius = 3 + 2 * Math.sin(new Date() / 1000 % 1000 * this.radius);}Pour le code complet, voir 02-text-to-particles-with-size-changing
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.