Exemple d'utilisation de toile pour obtenir un bel effet de pluie

Cet article explique comment utiliser la toile pour dessiner un bel effet de pluie. Jetons d'abord un coup d'œil à l'effet final.

rendus

Regardez l’image pour analyser les effets que nous devons obtenir.

1. Effet de chute de goutte de pluie, déplacez la souris pour contrôler la direction de chute

2. Les gouttes de pluie tombent et se dispersent en petites gouttelettes d'eau. La direction du mouvement des petites gouttelettes d'eau est la même que la direction du mouvement de la souris.

3. Les gouttes de pluie tombent dans une certaine plage des coordonnées de la souris et se dispersent en petites gouttelettes d'eau. De même, la direction du mouvement des petites gouttelettes d'eau est la même que la direction du mouvement de la souris.

D'accord, divisons grossièrement l'ensemble de l'effet en trois effets, et obtenons ces trois effets, et nous avons terminé.

Faisons-le étape par étape.

L'idée pour obtenir l'effet complet est,

Utilisez un tableau pour enregistrer les objets goutte de pluie.

Un objet goutte de pluie possède divers attributs utilisés pour représenter la coordonnée x, la coordonnée y, la longueur, la vitesse de chute, la couleur et un drapeau pour déterminer s'il faut le supprimer.

Ajoutez un certain nombre d'objets goutte de pluie au tableau, puis parcourez le tableau, modifiez les coordonnées x et y de chaque objet goutte de pluie et utilisez le canevas pour dessiner deux points en fonction des coordonnées de l'objet goutte de pluie, qui forment ensemble un goutte de pluie.

La clé pour obtenir cet effet réside donc dans les coordonnées

Coordonnée x de la goutte de pluie : un nombre aléatoire

Coordonnée y des gouttes de pluie : -100, ceci permet aux gouttes de pluie d'entrer de l'extérieur de la zone visible

Coordonnée x de la goutte de pluie :原x坐标的值+ speed * speedx

la vitesse est une valeur fixe, indiquant la vitesse de chute des gouttes de pluie,

speedx est une variable liée à la direction du mouvement de la souris, speedx = speedx + (maxspeedx - speedx) / 50

Et maxspeedx est une valeur obtenue en fonction de la direction du mouvement de la souris.

maxspeedx = (e.clientX - canvasEl.clientWidth / 2) / (canvasEl.clientWidth / 2) ,

e.clientX : La valeur de la distance de la souris à gauche de la zone visible

canvasEl.clientWidth : largeur de toute la zone visuelle

En d’autres termes, speedx est une valeur se rapprochant progressivement de maxspeedx

La plage de valeurs de maxspeedx est comprise entre -1 et 1. Plus sa valeur est proche de -1, la direction est plus à gauche. Plus la valeur est proche de 1, la direction est plus à droite.

Pourquoi ne pas simplement utiliser maxspeedx ?

Ceci permet d'éviter que les gouttes de pluie ne changent de direction si rapidement. Au lieu de changer de direction immédiatement après le changement de souris, il devrait y avoir un léger délai pour que l'apparence soit meilleure.

Si vous utilisez maxspeedx, l'effet est comme ceci

Si vous utilisez speedx, l'effet est comme ceci

Coordonnée y de la goutte de pluie :原y坐标的值+ speed

La vitesse est la même que celle mentionnée dans la coordonnée x ci-dessus. Il s'agit d'une valeur fixe qui représente la vitesse de chute des gouttes de pluie.

D'accord, enfin, j'utilise Canvas pour dessiner deux points en fonction des coordonnées de l'objet goutte de pluie, puis je les connecte, et la goutte de pluie est dessinée.

La coordonnée du premier point est relativement simple. Obtenez directement la coordonnée x et la coordonnée y de l'objet goutte de pluie, qui est la coordonnée de ce point.

Coordonnées du deuxième point :

x坐标= 雨滴x坐标的值+ 雨滴长度* speedx

y坐标= 雨滴y坐标的值+ 雨滴长度

Enfin, reliez ces deux points et vous obtiendrez une ligne qui est une goutte de pluie.

Lors du réglage de la coordonnée x, la variable speedx est à nouveau utilisée. Ceci permet de rendre la direction des gouttes de pluie et la direction de chute des gouttes de pluie identiques.

Quand speedx n'est pas utilisé, c'est comme ça

Lorsque vous utilisez speedx, c'est le cas

L’idée ici est en fait quelque peu similaire à l’effet ci-dessus.

Utilisez un tableau pour enregistrer de petits objets en forme de goutte d'eau.

Une petite goutte d’eau est en réalité un arc de cercle.

Un petit objet goutte d'eau possède divers attributs utilisés pour représenter les coordonnées de la petite goutte d'eau, la vitesse de déplacement sur l'axe x, la vitesse de déplacement sur l'axe y, le rayon du cercle et un drapeau pour déterminer s'il faut le supprimer.

Ajoutez un certain nombre de petits objets goutte d'eau au tableau, puis parcourez le tableau, modifiez les coordonnées x et y de chaque petit objet goutte d'eau et utilisez le canevas pour dessiner un arc en fonction des attributs de coordonnées et des attributs de rayon du petit. objet goutte d'eau.

Par conséquent, l’accent est toujours mis sur les coordonnées pour obtenir l’effet.

De petites gouttelettes d'eau apparaissent lorsque la goutte de pluie disparaît, donc les coordonnées de la petite goutte d'eau sont également basées sur les coordonnées de la goutte de pluie. Lorsque vous supprimez une goutte de pluie, de petites gouttelettes d'eau apparaîtront et la direction de déplacement de la petite goutte d'eau est. aussi la direction de la chute de la goutte de pluie. Souris La direction du mouvement est la même, donc la vitesse variable mentionnée ci-dessus sera toujours nécessaire.

小水珠x坐标： 删除的雨滴x坐标+ 删除的雨滴长度* speedx

小水珠y坐标：删除的雨滴y坐标+ 删除的雨滴长度

Ici, nous devons utiliser deux attributs du petit objet goutte d'eau vx (la vitesse de changement de la valeur de l'axe des x) et vy (la vitesse de changement de la valeur de l'axe des y).

La coordonnée x de la petite gouttelette d'eau

vx = vx + speedx / 2

小水珠的x坐标=原x坐标+ vx ,

speedx : une variable liée à la direction du mouvement de la souris mentionnée ci-dessus. La fonction ici est de contrôler la direction du mouvement des petites gouttelettes d'eau dans la même direction que les autres directions.

speedx / 2 , le but de la division par 2 est de rendre la distance de déplacement des petites gouttelettes d'eau sur l'axe des x plus courte et plus réaliste.

La coordonnée y de la petite goutte d'eau

vy = vy + gravity

小水珠的y坐标= 原y坐标+ vy;

vy : un nombre négatif

Gravité : Gravité, un nombre positif, fixé à 0,5 dans le code complet

Parce que la coordonnée y d'origine est un nombre positif, la valeur de la coordonnée y de la petite gouttelette d'eau va d'abord diminuer puis augmenter. Ceci permet d'obtenir l'effet que la petite gouttelette d'eau va d'abord monter puis descendre. Voir l'image.

Enfin, utilisez simplement le canevas pour dessiner un arc en fonction des attributs de coordonnées et des attributs de rayon de la petite goutte d'eau. L'arc est aléatoire.

3. Les gouttes de pluie tombent dans une certaine plage des coordonnées de la souris et se dispersent en petites gouttelettes d'eau. De même, la direction du mouvement des petites gouttelettes d'eau est la même que la direction du mouvement de la souris.

Il est facile de déterminer la taille du cercle dans l'image. Supposons que le rayon du cercle soit de 35. Nous pouvons obtenir les coordonnées de la souris en prenant les coordonnées de la souris comme centre du cercle et 35 comme rayon. , nous pouvons déterminer la taille du cercle.

Le point clé est de savoir comment déterminer si les gouttes de pluie sont entrées dans cette plage. Cela nécessite l'utilisation du théorème de Pythagore. Regardez l'image.

Parce qu'une goutte de pluie est une ligne reliant deux points. Pour voir si la goutte de pluie est entrée dans cette plage, vous devez regarder les coordonnées du point situé sous la goutte de pluie. Quelle est la distance en ligne droite de la souris est la longueur du segment de ligne. AB sur la photo.

Théorème de Pythagore : La somme des carrés des deux côtés rectangles d'un triangle rectangle est égale au carré de l'hypoténuse.

AB = Math.sqrt (BC BC + AC AC)

BC = coordonnée x de la goutte de pluie - coordonnée x de la souris

AC = coordonnée y de la goutte de pluie - coordonnée y de la souris

La méthode Math.sqrt() est utilisée pour calculer la racine carrée d'un nombre

Une fois que nous connaissons la distance en ligne droite entre la goutte de pluie et la souris, comparez-la avec le rayon du cercle. S'il est supérieur au rayon, il n'est pas dans la plage, sinon il l'est.

Si c'est à portée, supprimez les gouttes de pluie et dessinez quelques petites gouttes d'eau.

Résumer

Pour obtenir cet effet, le problème réside dans la direction, la direction des gouttes de pluie, la direction des gouttes de pluie qui tombent et la direction du mouvement des petites gouttelettes d'eau. Elles sont toutes liées à la direction du mouvement de la souris. utilisez une toile pour tracer continuellement des lignes en fonction de la distance.

Code complet

 <!doctype html><html lang=en><head> <meta charset=UTF-8> <style> * { margin: 0; padding: 0; </style></head><body> <identifiant du canvas =canvas style=position: absolue; hauteur: 100%; largeur:100%;></canvas> <script> window.onload = main; function main() { // Récupère l'élément canevas var canvasEl = document.getElementById('canvas'); var ctx = canvasEl.getContext('2d'); // La couleur d'arrière-plan du canevas var backgroundColor = '#000'; largeur de la zone visuelle canvasEl. width = canvasEl.clientWidth; // La hauteur du canevas est égale à la hauteur de la zone visible canvasEl.height = canvasEl.clientHeight; // Tableau pour enregistrer les petites gouttes d'eau // Une fois les gouttes de pluie tombées, elles se dispersent en petites gouttelettes d'eau. Les petites gouttelettes d'eau sont des arcs. var dropList = []; puis tombe, principalement à cause de la gravité. À cause des variables var gravité = 0.5; // Enregistre le tableau de gouttes de pluie // Chaque goutte de pluie est une ligne dessinée var linelist = []; ] Représente la valeur de l'axe des x, mousePos[1] représente la valeur de l'axe des y var mousePos = [0, 0]; // En suivant le passage de la souris, les gouttes de pluie dans la zone de taille mouseDis disparaîtront, formant un effet de diffusion // Avec mousePos comme centre du cercle, mouseDis est Radius, les gouttes de pluie dans cette plage s'étaleront et formeront de nombreuses petites gouttes d'eau var mouseDis = 35; // Mettez à jour l'animation une fois et dessinez les gouttes de pluie lineNum. , plus la pluie sera dense. lineNum = 3; // Suivez la direction de la souris pour changer la direction de la pluie // Après le déplacement de la souris, la direction de la pluie changera lentement, principalement en fonction de la variable speedx var speedx = 0 // maxspeedx est le maximum; valeur que speedx peut prendre // Lorsque speedx = maxspeedx, la direction de la pluie changera immédiatement avec la direction du mouvement de la souris var maxspeedx = 0; // Lorsque la taille de la page change, réinitialisez la taille du canevas window.onresize = function () { toileEl.width = canvasEl.clientWidth; canvasEl.height = canvasEl.clientHeight; } //Déplacez la souris pour déclencher l'événement window.onmousemove = function (e) { //Définissez mousePos égal aux coordonnées de la souris // e.clientX est la distance jusqu'au à gauche de la zone visible de la fenêtre du navigateur Distance // e.clientY est la distance depuis le haut de la zone visible de la fenêtre du navigateur mousePos[0] = e.clientX; e.clientY; // Définit la valeur de maxspeedx via la position de la souris, la plage de valeurs est de -1 à 1 // La valeur de maxspeedx est liée à // 1. La direction de la goutte de pluie // 2. La direction de la chute des gouttes de pluie // 3. La vitesse à laquelle la direction de chute des gouttes de pluie change avec la direction du mouvement de la souris // 4. La direction de déplacement des petites gouttelettes d'eau // Plus la valeur est proche de 1, la direction est plus à droite // Plus la valeur est proche de -1, plus la direction est vers la gauche maxspeedx = (e.clientX - canvasEl.clientWidth / 2) / (canvasEl.clientWidth / 2); } // Selon les paramètres, renvoie une couleur RVB, utilisée pour définir la couleur des gouttes de pluie function getRgb(r, g, b) { return rgb( + r + , + g + , + b + ); } // Dessine une goutte de pluie (une ligne) function createLine(e) { // Génère aléatoirement la longueur de la goutte de pluie var temp = 0,25 * (50 + Math.random() * 100); // Un objet ligne, représentant une goutte de pluie var line = { // Vitesse de chute d'une goutte de pluie : 5,5 * (Math.random() * 6 + 3), / / Déterminez s'il faut supprimer, si la valeur est vraie, supprimez-la die : false, // Coordonnée x de la goutte de pluie posx : e, // Coordonnée y de la goutte de pluie posy : -50, // Longueur de la goutte de pluie h : temp, // Couleur des gouttes de pluie : getRgb(Math.floor(temp * 255 / 75), Math.floor(temp * 255 / 75), Math.floor(temp * 255 / 75)) }; objet line (raindrop), ajouté au tableau contenant les gouttes de pluie linelist.push(line); Dessinez une petite goutte d'eau (les petites gouttelettes d'eau après la dispersion des gouttes de pluie sont des arcs) function createDrop(x, y) { // Un objet goutte, représentant un arc var drop = { // Détermine s'il faut supprimer, valeur Si vrai, supprimer die: false, // La coordonnée x du centre de l'arc posx: x, // La coordonnée y du centre de l'arc posy: y, // vx représente la vitesse à laquelle la valeur de l'axe x change vx: (Math.random ( ) - 0.5) * 8, // vy représente la vitesse à laquelle la valeur de l'axe y change. La plage de valeurs est : -3 à -9 vy : Math.random() * (-6) - 3, // Le rayon du rayon de l'arc : Math. random() * 1.5 + 1 }; return drop; } // Dessine un certain nombre de petites gouttes d'eau function madedrops(x, y) { // Génère aléatoirement un nombre maxi // maxi Représente le nombre de petites gouttes d'eau à dessiner var maxi = Math.floor(Math.random() * 5 + 5); for (var i = 0; i < maxi; i++) { dropList.push(createDrop(x, y) ); } } // Commencez à appeler la fonction de mise à jour pour mettre à jour l'animation window.requestAnimationFrame(update); // Mettez à jour la fonction d'animation update() { // Si le tableau contenant les petites gouttes d'eau a du contenu if (dropList.length > 0) { // Parcourez le tableau qui contient de petites gouttes d'eau dropList.forEach(function (e) { //Définissez e.vx, vx représente la vitesse de changement de coordonnée x // (speedx)/2 est pour, rendre la distance de déplacement des petites gouttelettes d'eau sur l'axe des x plus courte et plus réaliste // Faites également en sorte que la direction de déplacement des petites gouttelettes d'eau soit la même que la direction des gouttes de pluie, la direction de chute des gouttes de pluie et la direction de déplacement de la souris e.vx = e.vx + (speedx / 2); e.posx = e.posx + e.vx; //Définissez e.vy, vy représente la vitesse de changement de la coordonnée y // La plage de e.vy est de -3 à -9, et à ce moment e.posy ( coordonnée y) doit être une valeur positive, donc la valeur de e.posy diminuera d'abord puis augmentera // c'est-à-dire que les gouttes de pluie se disperseront en petites gouttelettes d'eau, et les petites gouttelettes d'eau monteront d'abord puis chute. e.vy = e.vy + gravité; e.posy = e.posy + e.vy; // Si la coordonnée y de la petite goutte d'eau est supérieure à la hauteur de la zone visible, définissez l'attribut die sur true // Si la petite goutte d'eau dépasse la zone visible, supprimez-la if (e. posy > canvasEl.clientHeight) { e .die = true; } } } // Supprimez le membre du tableau dont l'attribut die est true // Supprimez les petites gouttes d'eau en dehors de la zone visible pour (var i = dropList.length - 1 ; je >= 0; je- -) { si (dropList[i].die) { dropList.splice(i, 1); } } // Définit la vitesse de changement de direction de la pluie, plage de valeurs : -1 à 1 // Lorsque speedx = maxspeedx, la direction de la pluie changera de vitessex immédiatement lorsque la souris se déplace direction = speedx + (maxspeedx - speedx) / 50; // Dessine un certain nombre de gouttes de pluie en fonction de la valeur de lineNum pour (var i = 0; i < lineNum; i++) { // Appelez la fonction createLine, le paramètre est la coordonnée x de la goutte de pluie createLine(Math.random() * 2 * canvasEl.width - (0.5 * canvasEl.width) } // Définit la ligne de fin, c'est-à-dire la les gouttes de pluie s'étalent pour former de nombreuses petites gouttelettes d'eau. Position var endLine = canvasEl.clientHeight - Math.random() * canvasEl.clientHeight / 5 //; Parcourez le tableau contenant les gouttes de pluie linelist.forEach(function (e) { // Utilisez le théorème de Pythagore pour déterminer une plage dans laquelle les gouttes de pluie s'étaleront pour former de petites gouttelettes d'eau // e.posx + speedx * eh est la coordonnée x de la goutte de pluie/ / e.posy + eh est la coordonnée y de la goutte de pluie var dis = Math.sqrt(((e.posx + speedx * eh) - mousePos[0]) * ((e.posx + speedx * eh) - mousePos[0]) + (e.posy + eh - mousePos[1]) * (e.posy + eh - mousePos[1])); // Si c'est dans la zone mouseDis, supprimez la goutte de pluie et dessinez-le Quelques petites gouttelettes d'eau (arcs) // Réalisez l'effet de la souris touchant les gouttes de pluie et les gouttes de pluie se dispersant en petites gouttelettes d'eau if (dis < mouseDis) { // Supprimez les gouttes de pluie e.die = true; quelques petites gouttelettes d'eau (arc de cercle) madedrops(e.posx + speedx * eh, e.posy + eh); } // Si les gouttes de pluie dépassent la ligne de fin, supprimez les gouttes de pluie et dessinez quelques petites gouttes d'eau (arcs) if ((e.posy + eh) > endLine) { e.die = true; madedrops(e.posx + speedx * eh, e.posy + eh); } // Si la coordonnée y de la goutte de pluie est supérieure à la hauteur de la zone visible, définissez le dé attribut à true // Si la goutte de pluie dépasse la zone visible, supprimez-la if (e.posy >= canvasEl.clientHeight) { e.die = true } else { // Augmentez progressivement la valeur de la coordonnée y de la goutte de pluie e.posy = e. posy + e.speed ; // Change la coordonnée x de la goutte de pluie // * speedx est utilisé pour contrôler la direction de chute de la goutte de pluie // Rendre la direction de chute de la goutte de pluie identique à la direction du mouvement de la souris e.posx = e .posx + e.speed * speedx; } }); Supprimez les membres du tableau dont l'attribut die est vrai // Supprimez les gouttes de pluie dans la zone de la souris, au-delà de la ligne de fin et en dehors de la zone visible pour (var i = linelist.length - 1; i >= 0; i--) { if (linelist[i].die) { linelist.splice(i, 1); } } // Render render(); // Appel récursif pour obtenir un effet d'animation window.requestAnimationFrame(update); // Fonction de rendu render() { // Dessine un rectangle aussi grand que la zone visible ctx.fillStyle = backgroundColor ctx.fillRect(0, 0, canvasEl.width, canvasEl.height); // Dessine un effet de goutte de pluie ctx. lineWidth = 5; linelist.forEach(function (line) { ctx.StrokeStyle = line.color; ctx.beginPath(); ctx.moveTo(line.posx, line.posy); // * speedx est utilisé pour contrôler la direction des gouttes de pluie // Rendre la direction des gouttes de pluie identique à la direction du mouvement de la souris ctx.lineTo(line.posx + line. h * speedx, line.posy + line.h); ctx.Stroke(); // Dessine des gouttes de pluie qui s'étalent pour former de petites gouttelettes d'eau ctx.lineWidth = 1; dropList.forEach(function (e) { ctx.beginPath(); ctx.arc(e.posx, e.posy, e.radius, Math.random() * Math.PI * 2, 1 * Math.PI); ctx.stroke(); }); // Décommentez et vous pouvez voir la plage de la souris/* ctx.beginPath(); ctx.arc(mousePos[0], mousePos[1], mouseDis, 0, 2 * Math.PI); ctx.AVC(); */ } } </script></body></html>

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.