Beispielcode für eine trigonometrische Leinwandfunktion zur Simulation des Wasserwelleneffekts

In einem aktuellen Projekt wurde eine Hintergrundanimation mit einem Wasserwelleneffekt entworfen. Es gab jedoch keine GIF- oder SVG-Animation, um sie zu implementieren, aber der Animationseffekt war im Grunde nicht sehr gut Ich habe Bezier-Kurven verwendet, um dies zu erreichen. Ich dachte an die verschiedenen Wellenformdiagramme, die ich zuvor gesehen hatte, und dachte darüber nach, es kurz mit trigonometrischen Funktionsbildern zu simulieren.

Der Ausdruck der Sündenfunktion ist wie folgt:

y=Asin（wx+φ）+h

Unter diesen repräsentiert A die Amplitude, ω repräsentiert die Winkelfrequenz (ω = 2π/T, T ist die Periode der Funktion), φ repräsentiert die Anfangsphase und h repräsentiert die Länge der Verschiebung des Bildes in die positive Richtung die y-Achse (Hier ist zu beachten: h bedeutet in der Mathematik ursprünglich eine Aufwärtsverschiebung, in der Leinwand wird jedoch das Bildschirmkoordinatensystem verwendet, dh die obere linke Ecke ist der Ursprung und h bedeutet eine Abwärtsverschiebung);

Der Zeichnungscode lautet wie folgt:

(1) Canvas-Tag hinzufügen

 <canvas id=canvas></canvas>

(2) CSS-Stil hinzufügen und Leinwandbreite und -höhe festlegen

 html,body { padding: 0; margin: 0; width: 100 %;}canvas { width: 100 %;}

(3) Funktionsbild zeichnen

 var Canvas = document.getElementById(Canvas), ctx = Canvas.getContext('2d'), width = Canvas.width = Canvas.offsetWidth, Height = Canvas.height = Canvas.OffsetHeight;//Parameter deklarieren var A=50, W=1 / 50, Q=0, H= height / 2;//Zeichnungsmethode (function draw(){ ctx.clearRect(0, 0, width, height);//Löschen Sie die Leinwand ctx.beginPath(); //Setzen Sie die Linienfarbe ein ctx.lineWidth = 1; //Legen Sie die Linienbreite fest ctx.moveTo(0, height /2) ; //Startpunktposition für (let x = 0; x <= width; x++) {// Zeichnen Sie die Variable von x entsprechend y = A*Math.sin(W*x+Q) +H ctx.lineTo(x, y) } ctx.Stroke(); //Zeichne den Pfad ctx.closePath(); //Schließe den Pfad})()

Auf diese Weise erhalten wir das folgende Bild:

Was oben erhalten wird, ist ein statisches Funktionsbild, und die Wellenformen oder Wasserwellen, die wir im Allgemeinen sehen, ändern sich kontinuierlich mit der Zeit. Hier müssen wir den Parameter Phase φ im vorherigen Schritt verwenden (js ist Q im Code), wir können kontinuierlich Erhöhen oder verringern Sie φ mit der Zeit, um unterschiedliche Bilder zu unterschiedlichen Zeiten zu erhalten. Verwenden Sie window.requestAnimationFrame, um eine Frame-Animation zu implementieren.

Ändern Sie den obigen Code wie folgt:

 var Canvas = document.getElementById(Canvas), ctx = Canvas.getContext('2d'), width = Canvas.width = Canvas.offsetWidth, Height = Canvas.height = Canvas.OffsetHeight;//Parameter deklarieren var A=50, W=1 / 50, Q=0, H= height / 2;//Zeichnungsmethode (function draw(){ ctx.clearRect(0, 0, width, height);//Löschen Sie die Leinwand ctx.beginPath(); //Setzen Sie die Linienfarbe ein ctx.lineWidth = 1; //Legen Sie die Linienbreite fest ctx.moveTo(0, height /2) ; //Startpunktposition für (let x = 0; x <= width; x++) {// Zeichnen Sie die Variable von x entsprechend y = A*Math.sin(W*x+Q) +H ctx.lineTo(x, y) } ctx.Stroke(); //Zeichne den Pfad ctx.closePath(); //Schließe den Pfad})()

Der Effekt ist wie folgt (Zhazha-Screenshot-Software):

Obwohl der obige Pfad geschlossen ist, erfüllt er nicht den Teil, den wir füllen müssen. Der Effekt des direkten Füllens ist wie folgt:

Der vollständig ausgefüllte Pfad sollte so aussehen:

Erstellen Sie nach dem Schließen des Pfads eine Verlaufsfarbe als Füllfarbe. Der Code lautet wie folgt:

 var lingrad = ctx.createLinearGradient(0,0,width,0); lingrad.addColorStop(0, 'rgba(0,186,128,0.8)'); (function draw(){ window.requestAnimationFrame(draw); ctx.clearRect(0, 0, height); ctx.beginPath(); ctx.fillStyle = lingrad; ctx.moveTo(0, height /2); =speed; for (let x = 0; x <= width; x++) { var y = A*Math.sin(W*x+Q) +H; ctx.lineTo(x, y); ctx.lineTo(0, height); .closePath();})()

Der Effekt ist wie folgt:

1. Zunächst können Sie der obigen Wellenform eine Wellenform mit höherer Frequenz überlagern, um die Wellenform unregelmäßig zu machen.

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

2. Fügen Sie eine weitere Wellenform mit unterschiedlichen Phasenänderungen hinzu, deren Verlaufsrichtung der vorherigen Verlaufsrichtung entgegengesetzt ist, um einen überlappenden Schatteneffekt zu erzeugen, und legen Sie den Pfadüberlappungseffekt globalCompositeOperation fest.

 var Canvas = document.getElementById(Canvas), ctx = Canvas.getContext('2d'), Breite = Canvas.width = Canvas.offsetWidth, Höhe = Canvas.height = Canvas.OffsetHeight;var A=30, W=1 / 200, Q=0, H= Höhe / 2;var A2=30, W2=1/300, Q2=0, H2= Höhe / 2;var speed=-0.01;var speed2=-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)'); (Funktion draw(){ window.requestAnimationFrame(draw); ctx.clearRect(0, 0, width, height); ctx.fillStyle = lingrad; ctx.moveTo(0, height /2); //Zeichne die erste Wellenform Q+=speed; = 0; x <= width; x++) { var s = 0.1*Math.sin(x/150)+1; A*Math.sin(W*x+Q) +H; ctx.lineTo(x, y); ctx.lineTo(0, height); .fill(); ctx.closePath() //Legen Sie den Überlappungseffekt fest ctx.globalCompositeOperation = destination-over //Zeichnen Sie die zweite Wellenform ctx.beginPath(); ctx.fillStyle = lingrad2; Q2+=speed2; for (let x = 0; x < width; x++) { var y = A2*Math.sin(x*W2+Q2) +H2; ; } ctx.lineTo(width,height); ctx.lineTo(0,height); ctx.closePath();})()

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.