Exemple de code pour la fonction trigonométrique du canevas pour simuler l'effet de vague d'eau

Dans un projet récent, l'interface utilisateur a conçu une animation d'arrière-plan avec un effet de vague d'eau. Cependant, il n'y avait pas d'animation gif ou svg pour l'implémenter, mais l'effet d'animation n'était pas très bon et j'ai vérifié en ligne. J'ai utilisé les courbes de Bézier pour y parvenir, j'ai pensé aux différents diagrammes de formes d'onde que j'avais vus auparavant, j'ai donc pensé à le simuler brièvement à l'aide d'images de fonctions trigonométriques.

L'expression de la fonction sin est la suivante,

y=Asin（wx+φ）+h

Parmi eux, A représente l'amplitude, ω représente la fréquence angulaire (ω=2π/T, T est la période de la fonction), φ représente la phase initiale, et h représente la longueur de translation de l'image dans le sens positif de l'axe y (il convient de noter ici : h signifie à l'origine en mathématiques une traduction vers le haut, mais le système de coordonnées de l'écran est utilisé dans le canevas, c'est-à-dire que le coin supérieur gauche est l'origine et h signifie une traduction vers le bas) ;

Le code du dessin est le suivant :

(1) Ajouter une balise de toile

 <identifiant du canevas=canvas></canvas>

(2) Ajoutez un style CSS et définissez la largeur et la hauteur du canevas

 html, corps { remplissage : 0 ; marge : 0 ; largeur : 100 % ; hauteur : 100 % ;}toile { largeur : 100 % ; hauteur : 100 % ;}

(3) Dessiner l'image de la fonction

 var canvas = document.getElementById(canvas), ctx = canvas.getContext('2d'), width = canvas.width = canvas.offsetWidth, height = canvas.height = canvas.offsetHeight;//Déclarer les paramètres var A=50, W=1 / 50, Q=0, H= hauteur / 2;//Méthode de dessin (function draw(){ ctx.clearRect(0, 0, width, height);//Effacer le canevas ctx.beginPath(); //Démarrer le chemin ctx.strokeStyle=#000; //Définir la couleur de la ligne ctx.lineWidth = 1; //Définir la largeur de la ligne ctx.moveTo(0, height /2) ; //Position du point de départ pour (let x = 0; x <= width; x++) {// Dessinez la variable de x correspondant à y = A*Math.sin(W*x+Q) +H ctx.lineTo(x, y) } ctx.stroke(); //Dessine le chemin ctx.closePath( //Ferme le chemin})() ;

De cette façon, nous obtenons l'image suivante :

Ce qui est obtenu ci-dessus est une image de fonction statique, et les formes d'onde ou les vagues d'eau que nous voyons généralement changent continuellement avec le temps. Ici, nous devons utiliser le paramètre phase φ à l'étape précédente (js est Q dans le code), nous pouvons en continu. augmentez ou diminuez φ avec le temps pour obtenir différentes images à différents moments ; utilisez window.requestAnimationFrame pour implémenter une animation d'image ;

Modifiez le code ci-dessus pour :

 var canvas = document.getElementById(canvas), ctx = canvas.getContext('2d'), width = canvas.width = canvas.offsetWidth, height = canvas.height = canvas.offsetHeight;//Déclarer les paramètres var A=50, W=1 / 50, Q=0, H= hauteur / 2;//Méthode de dessin (function draw(){ ctx.clearRect(0, 0, width, height);//Effacer le canevas ctx.beginPath(); //Démarrer le chemin ctx.strokeStyle=#000; //Définir la couleur de la ligne ctx.lineWidth = 1; //Définir la largeur de la ligne ctx.moveTo(0, height /2) ; //Position du point de départ pour (let x = 0; x <= width; x++) {// Dessinez la variable de x correspondant à y = A*Math.sin(W*x+Q) +H ctx.lineTo(x, y) } ctx.stroke(); //Dessine le chemin ctx.closePath( //Ferme le chemin})() ;

L'effet est le suivant (logiciel de capture d'écran Zhazha) :

Bien que le chemin ci-dessus soit fermé, il ne correspond pas à la partie que nous devons remplir. L'effet du remplissage direct est le suivant :

Le chemin complet rempli devrait ressembler à ceci :

Après avoir fermé le chemin, créez une couleur dégradée comme couleur de remplissage. Le code est le suivant :

 var lingrad = ctx.createLinearGradient(0,0,width,0); lingrad.addColorStop(0, 'rgba(0,186,128,0.8)'); draw(){ window.requestAnimationFrame(draw); ctx.clearRect(0, 0, largeur, hauteur); ctx.beginPath(); ctx.strokeStyle=#000; ctx.fillStyle = lingrad; ctx.lineWidth = 1; =vitesse; pour (soit x = 0; x <= largeur; x++) { var y = A*Math.sin(W*x+Q) +H; ctx.lineTo(x, y); ctx.lineTo(largeur, hauteur); .closePath();})()

L'effet est le suivant :

1. Tout d’abord, vous pouvez superposer une forme d’onde à plus haute fréquence sur la forme d’onde ci-dessus pour rendre la forme d’onde irrégulière.

 var s = 0,1*Math.sin(x/150)+1;var y = A*Math.sin(W*x+Q) +H;y=y*s;

2. Ajoutez une autre forme d'onde avec différents changements de phase et son remplissage en dégradé est opposé à la direction du dégradé précédent pour former un effet d'ombre superposée et définissez l'effet de chevauchement de chemin globalCompositeOperation ;

 var toile = document.getElementById(canvas), ctx = toile.getContext('2d'), largeur = toile.largeur = toile.offsetWidth, hauteur = toile.hauteur = toile.offsetHeight;var A=30, W=1 / 200, Q=0, H= hauteur / 2;var A2=30, W2=1/300, Q2=0, H2= hauteur / 2;var vitesse=-0,01;var vitesse2=-0,02;var lingrad = ctx.createLinearGradient(0,0,width,0);lingrad.addColorStop(0, 'rgba(0,186,128,0.8)');lingrad.addColorStop( 1, 'rgba(111,224,195,1)'); var lingrad2 = ctx.createLinearGradient(0,0,width,0);lingrad2.addColorStop(0,'rgba(111,224,195,1)');lingrad2.addColorStop(1, 'rgba(0,186,128,0.8)' (fonction) ; draw(){ window.requestAnimationFrame(draw); ctx.clearRect(0, 0, width, height); ctx.beginPath(); ctx.fillStyle = lingrad; ctx.moveTo(0, height /2); = 0; x <= largeur; x++) { var s = 0,1*Math.sin(x/150)+1; A*Math.sin(W*x+Q) +H; y=y*s; ctx.lineTo(x, y); } ctx.lineTo(largeur, hauteur); .fill(); ctx.closePath() //Définit l'effet de chevauchement ctx.globalCompositeOperation = destination-over //Dessine la deuxième forme d'onde ctx.beginPath(); ctx.fillStyle = lingrad2; Q2+=speed2; pour (soit x = 0; x < largeur; x++) { var y = A2*Math.sin(x*W2+Q2) +H2; ; } ctx.lineTo(largeur,hauteur); ctx.lineTo(0,hauteur) ; ctx.closePath();})()

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.