Canvas, die stärkste Schnittstelle von H5, realisiert dynamische Grafikfunktionen

Im letzten Artikel haben wir erklärt, wie man Canvas zum Zeichnen von Grafiken verwendet, aber die Zeichnungen waren alle statische Grafiken. Diese Woche werden wir lernen, wie man Canvas zum Zeichnen dynamischer Grafiken verwendet.

Bevor wir eine Animation zeichnen, müssen wir verstehen, was eine Animation ist. Welche Mindestgrundbedingungen sind für eine Animation erforderlich?

Welches Tool können wir zum Anzeigen von Animationen verwenden?

Dies ist ein mit PPT gezeichneter Animationseffekt

Anhand des vom obigen PPT gezeichneten Animationseffekts können wir erkennen, dass beim schnellen Wechseln zwischen mehreren PPT-Seiten ein Animationseffekt angezeigt wird.

Dies ist das Grundelement der Animationsimplementierung:

Spielen Sie mehrere Bilder kontinuierlich pro Zeiteinheit ab. Diese Zeiteinheit wird im Allgemeinen in Sekunden gemessen. Um ein ausreichend flüssiges Video in computergerenderten Grafiken zu erhalten, muss die Anzahl der Bilder pro Sekunde größer oder gleich der Bildwiederholfrequenz des Monitors sein (diese Bildwiederholfrequenz beträgt im Allgemeinen 60 Hz).

Der Zustand der Objekte in jedem Bild (Größe, Form, Farbe, Position, Winkel usw.) muss sich ändern

Wie implementieren wir diese beiden Bedingungen in Canvas?

Wir können dies so umwandeln, dass wir alle 1/60 Sekunden ein Diagramm zeichnen. Wenn wir in JavaScript ab und zu etwas tun möchten, verwenden wir als Methode den Timer setinterval.

setinerval（function f(){}，t）， zwei Parameter können an den Timer übergeben werden, einer ist die Funktion und der andere ist die Zeit. Die Bedeutung dieses Codes besteht darin, die Funktion f alle t ms auszuführen.

Dann nutzen wir dies, um alle 1/60 Sekunden ein Diagramm zu zeichnen

 setInterval(function(){canCon.fillStyle=black;//canCon.fill bedeutet, einen Stift in die Hand zu nehmen, um solide Grafiken auf dieses Reispapier zu zeichnen, //style=black bedeutet, ihn in schwarze Tinte zu tauchen//kontinuierlich Zu betrachten Nehmen Sie einfach einen Stift zum Zeichnen solider Grafiken und kleben Sie ihn mit schwarzer Tinte auf canCon.arc(233,233,66,0,Math.PI*2); //Erwägen Sie, einen Kreis auf dem Reispapier zu zeichnen (die X-Position des Mittelpunkts, die Y-Position, den Radius des Kreises, wo mit dem Zeichnen des Kreises begonnen werden soll und wo er enden soll); Strich zum Zeichnen},1000/60)

endgültige Wirkung

Es gibt jedoch noch keinen Animationseffekt, da die 60 innerhalb einer Sekunde gezeichneten Grafiken alle genau gleich sind und daher der Status des Elements geändert werden muss, wenn jede Grafik gezeichnet wird.

Übrigens möchte ich Ihnen einen Rock empfehlen. Der vordere ist 537, der mittlere ist 631 und der letzte ist 707. Freunde, die Front-End lernen möchten, können sich uns anschließen, um gemeinsam zu lernen und sich gegenseitig zu helfen. Es gibt Meister in der Gruppe, die jeden Abend kostenlose Live-Kurse anbieten. Wenn Sie nicht lernen möchten, nehmen Sie nicht teil.

(537-631-707)

Wie ändere ich den Zustand eines Elements?

Die Position eines Kreises wird durch die Koordinaten des Kreismittelpunkts bestimmt, sodass wir die Position des Elements jedes Mal ändern können, wenn wir die Leinwand zeichnen.

 variieren=100;//Geben Sie eine anfängliche Mittelposition des Kreises an, und die Y-Position des Kreismittelpunkts bewegt sich bei jedem Zeichnen um eine Distanz nach unten setInterval(function(){canCon.fillStyle=black;// canCon.fill bedeutet, einen Stift in die Hand zu nehmen, um feste Formen auf dieses Reispapier zu zeichnen, //style=black bedeutet, ihn einzutauchen Eine schwarze Tinte // Um ​​es anzuschließen, müssen Sie einen Stift zum Zeichnen solider Grafiken nehmen und ihn mit schwarzer Tinte canCon.arc(233,y++,66,0,Math.PI*2);//Auf den Reis kleben Papier Konzipieren und zeichnen Sie einen Kreis (die X-Position des Kreismittelpunkts, die Y-Position, den Radius des Kreises, wo mit dem Zeichnen des Kreises begonnen und wo er enden soll); canCon.fill();//Letzter Strich zeichnen},1000/60)

Was wir derzeit sehen, ist kein sich bewegender Kreis, sondern eher ein sich ausdehnender Fortschrittsbalken. Der Grund ist eigentlich ganz einfach. Wir löschen die Originalgrafik nicht jedes Mal, wenn wir eine neue Grafik zeichnen. Ein solches Bild ist das Ergebnis von n mehreren übereinandergelegten Grafiken. Jedes Mal, wenn wir eine neue Grafik zeichnen, müssen wir das Original löschen. Wie geht das?

 variieren=100;//Geben Sie eine anfängliche Mittelposition des Kreises an, und die Y-Position des Kreismittelpunkts bewegt sich bei jedem Zeichnen um eine Distanz nach unten setInterval(function(){canCon.clearRect(0, 0, 500, 500);/ /Löschen Sie die Koordinaten der oberen linken Ecke eines rechteckigen Bereichs sowie die Breite und Höhe des Rechtecks. canCon.fillStyle=black;//canCon.fill bedeutet, ein Gemälde auf diesem Reispapier aufzunehmen Ein Stift mit soliden Grafiken, //style=black bedeutet, ihn in schwarze Tinte zu tauchen //Um ihn zusammenzusetzen, bedeutet es, einen Stift zu nehmen, der solide Grafiken zeichnet, und ihn mit schwarzer Tinte zu bekleben canCon.arc(233,y++,66 , 0,M ath.PI*2);//Erwägen Sie das Zeichnen eines Kreises auf Reispapier (X-Position des Kreismittelpunkts, Y-Position, Radius des Kreises, wo mit dem Zeichnen des Kreises begonnen werden soll und wo er enden soll); );// Beginnen Sie mit dem Malen},1000/60)

Aber es hat derzeit noch keine Auswirkungen. Was genau ist also los? Wir können an die Szene zurückdenken, als wir als Kinder malten. Wenn wir einen bestimmten Bereich auf dem Zeichenpapier radierten, müssen wir zuerst den Pinsel anheben, damit wir mit dem Radiergummi bestimmte Bereiche auf dem Papier löschen können. Deshalb müssen wir den Stift anheben, bevor wir einen Bereich der Leinwand löschen können.

 variieren=100;//Geben Sie eine anfängliche Mittelposition des Kreises an, und die Y-Position des Kreismittelpunkts verschiebt sich bei jedem Zeichnen um eine Distanz nach unten setInterval(function(){canCon.beginPath();// Heben Sie den Stift an. canCon. clearRect(0, 0, 500, 500); // Löschen Sie die Koordinaten der oberen linken Ecke eines rechteckigen Bereichs und die Koordinaten des Rechtecks Breite und Höhe canCon.fillStyle=black;//canCon.fill bedeutet, einen Stift zu nehmen, um solide Grafiken auf dieses Reispapier zu zeichnen, //style=black bedeutet, ihn in schwarze Tinte zu tauchen//Wenn man es zusammen betrachtet , es ist Nehmen Sie einen Stift zum Zeichnen fester Formen und kleben Sie ihn mit schwarzer Tinte auf canCon.arc(233,y++,66,0,Math.PI*2); //Erwägen Sie, einen Kreis auf dem Reispapier zu zeichnen (die X-Position des Mittelpunkts, die Y-Position, den Radius des Kreises, wo mit dem Zeichnen des Kreises begonnen werden soll und wo er enden soll); Strich zum Zeichnen},1000/60)

Auf diese Weise können wir einen beweglichen Kreis erhalten

Das Obige ist die Einführung des Herausgebers in die stärkste Schnittstelle von H5, Canvas, zur Implementierung dynamischer Grafikfunktionen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte mich auch bei allen für die Unterstützung der VeVb-Kampfsport-Website bedanken!