Codebeispiele für die Implementierung normaler Animationen und Partikelanimationen in Canvas

Canvas wird zum Zeichnen von Bildern und Animationen auf Webseiten verwendet. Es kann als Leinwand verstanden werden und der gewünschte Effekt wird auf dieser Leinwand aufgebaut.

Canvas kann zusätzlich zu häufig verwendeten regulären Animationen auch komplexere dynamische Effekte erzielen. In diesem Artikel werden gewöhnliche dynamische Effekte und Partikelspezialeffekte verwendet, um eine einfache Uhr zu implementieren.

Gewöhnliche Animationen verwenden die Canvas-API, um regelmäßige Muster und Animationen zu erzielen.

Wirkung

Der Effekt ist relativ einfach zu erreichen. Wir analysieren hauptsächlich die Implementierung des Winkelversatzes zwischen der Skala und dem Zeiger.

Dieses Beispiel ist die Zeichnung einer Stundenskala: Auf dem Zifferblatt sind 12 Stunden angezeigt, Math.PI beträgt 180° und jede Stunde nimmt 30° ein.

.save() bedeutet, den Status der aktuellen Canvas-Umgebung zu speichern und auf dieser Basis zu zeichnen. Nach Abschluss des Zeichnens werden der zuvor gespeicherte Pfadstatus und die zuvor gespeicherten Attribute zurückgegeben.

Das Gleiche gilt für die Minutenskala. Ändern Sie einfach den Winkel und den Stil.

 // Stündliche Zeitskala offscreenCanvasCtx.save(); for (var i = 0; i < 12; i++) { offscreenCanvasCtx.beginPath(); // Skalieren Sie die Farbe offscreenCanvasCtx.StrokeStyle = '#fff'; lineWidth = 3; // Jede Stunde 30° außerhalb des Bildschirms belegenCanvasCtx.rotate(Math.PI / 6); // Die Startposition des Zeichnens offscreenCanvasCtx.lineTo(140, 0) // Die Endposition des Zeichnens; wiederherstellen() ;

Nehmen Sie als Beispiel den Sekundenzeiger: Ermitteln Sie die Sekunden der aktuellen Zeit und berechnen Sie den entsprechenden Versatzwinkel

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

Mit Canvas können komplexe, unregelmäßige Animationen gezeichnet werden. Mithilfe von Partikeleffekten können komplexe, zufällige dynamische Effekte erzielt werden.

Partikel beziehen sich auf jedes Pixel in den Bilddaten imageData Fügen Sie nach dem Erhalten jedes Pixels Attribute oder Ereignisse hinzu, um mit den Partikeln im Bereich zu interagieren und dynamische Effekte zu erzielen.

Wirkung

Nehmen Sie als Beispiel die Bildkonvertierung in der folgenden Abbildung. Der Effekt besteht darin, zuerst das Bild auf der Leinwand zu rendern und dann jedes Pixel in dem Bereich zu erhalten, in dem sich der Text befindet.

 let image = new Image(); image.src='../image/logo.png'; //Speicherpixeldaten let image.width = 300; Rendern Sie das Bild und erhalten Sie die Pixelinformationen im Bereich image.onload=function(){ ctx.drawImage(image,(canvas.width-image.width)/2,(canvas.height-image.height)/2,image.width,image.height); imageData=ctx.getImageData((canvas.width- image.width)/2,(canvas.height-image.height)/2,image.width,image.height); //Diagrammpixelinformationen abrufen //Bild zeichnen};

Die Größe des Bildes beträgt 300 * 300 mit insgesamt 90.000 Pixeln. Jedes Pixel belegt 4 Bit und speichert RGBA-Daten.

 function getPixels(){ var pos=0; var data=imageData.data; //RGBA eindimensionale Array-Daten //Die Höhe und Breite des Quellbildes betragen 300px for(var i=1;i<=image.width ;i++ ){ for(var j=1;j<=image.height;j++){ pos=[(i-1)*image.width+(j-1)]*4; //Pixelposition abrufen if(data[pos]>=0){ var pixel={ x:(canvas.width-image.width)/2+j+Math.random()*20, //Jedes Pixel zurücksetzen Positionsinformationen y: (canvas.height-image.height)/2+i+Math.random()*20, //Positionsinformationen jedes Pixels zurücksetzen fillStyle:'rgba('+data[pos]+','+(data[pos+1])+','+(data[pos+2])+', ' +(data[pos+3])+')' } pixels.push(pixel); } } } } function drawPixels() { var canvas = document.getElementById(myCanvas); var ctx = canvas.getContext(2d); ctx.clearRect(0,0,canvas.width,canvas.height); var len = pixels.length, curr_pixel = null; for (var i = 0; i < len; i++) { curr_pixel = pixels[i]; ctx.fillStyle = curr_pixel.fillStyle; curr_pixel.y, 1, 1);

Textuhr rendern

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

Wirkung

Das Konzept der Textkonvertierungspartikel ist das gleiche wie oben. Die Pixel im ausgewählten Bereich werden gemäß den Filterbedingungen ausgewählt und im Array gespeichert. Nach dem Durchlaufen neu zeichnen.

 function getPixels(){ let imgData = ctx.getImageData((canvas.width-textWidth)/2,(canvas.height-textHeight)/2,textWidth,textHeight); let data = imgData.data pixelsArr = [] for(let i=1;i<=textHeight;i++){ for(let j=1;j<=textWidth;j++){ pos=[(i-1)*textWidth+(j-1)]*4; //Pixelposition abrufen if(data[pos]>=0){ var pixel={ x:j+Math.random()* 20 , //Setzen Sie die Positionsinformationen jedes Pixels zurück y:i+Math.random()*20, //Positionsinformationen jedes Pixels zurücksetzen fillStyle:'rgba('+data[pos]+','+(data[pos+1])+','+(data[pos+2])+', ' +(data[pos+3])+')' }; pixelsArr.push(pixel);

imgData speichert die Pixelinformationen im ausgewählten Bereich, jedes Pixel belegt 4 Bit und speichert die RGBA-Vier-Bit-Informationen. Dieser Code filtert das vierte Bit jedes Pixels und speichert alle Pixel mit einer Transparenz, die nicht 0 ist, im Array pixelsArr .

x und y zeichnen die Positionsinformationen des Partikels auf. Um den Bewegungseffekt im Rendering zu erzeugen, wird jedem Partikel eine Versatzposition von 0 bis 20 Pixeln hinzugefügt Bewegung. Wirkung.

Nachdem Sie die Partikel erhalten haben, müssen Sie den Originaltext auf der Leinwand löschen und die erhaltenen Partikel erneut auf die Leinwand zeichnen.

 function drawPixels() { // Den Canvas-Inhalt löschen und neu zeichnen 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); } }

Der Stil der Partikelneuzeichnung ist die ursprüngliche Farbe und Transparenz beim Filtern von Pixeln. Wenn jedes Partikel auf der Leinwand gezeichnet wird, wird der Größenparameter r definiert und der Wert von r ist eine Zufallszahl von 0 bis 4. Die resultierenden Partikel haben eine zufällige Größe.

Nach Erhalt der Partikel und erfolgreichem Neuzeichnen muss die Seite in Echtzeit aktualisiert werden. Hier wird die Methode window.requestAnimationFrame(callback) verwendet.

 function time() { ...... getpixels(); //Partikel abrufen drawPixels(); // Partikel neu zeichnen requestAnimationFrame(time);

Die Methode window.requestAnimationFrame(callback) teilt dem Browser mit, dass Sie eine Animation ausführen möchten, und fordert den Browser auf, die angegebene Funktion aufzurufen, um die Animation vor dem nächsten Neuzeichnen zu aktualisieren. Diese Methode verwendet eine Rückruffunktion als Parameter, die aufgerufen wird, bevor der Browser neu zeichnet.

Bei dieser Methode muss kein Zeitintervall festgelegt werden, und die Anrufhäufigkeit übernimmt das Systemzeitintervall (1 s).

Erläuterungen zum Dokument finden Sie hier

Wirkung

In diesem Artikel wird der dynamische Effekt der Uhr hauptsächlich auf zwei verschiedene Arten erreicht, wobei die Teilchenuhr eine bessere Bedienbarkeit aufweist. In der zukünftigen Canvas-Serie werden dynamischere Effekte für das Partikelsystem implementiert.

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.