Hallo, meine lieben Freunde, ich verachte das Frontend von mir selbst, schreibe zum ersten Mal Blogs und schreibe nicht gut. Bitte vergib mir zu verstehen.
Vor dem Unterrichten ist es schlau. damit hier;
Okey! Das Bild unten ist der einfache Effekt nach unserer Fertigstellung.
1. Definieren Sie LeinwandZunächst fügen wir das <Canvas> -Tag in die HTML -Datei ein, um die Größe der Leinwand zu definieren. Gleichzeitig wird die Hintergrundfarbe von Leinwand in der Innenstiltabelle festgelegt (um zu beobachten, wenn sie zum Zeichnen bequem ist).
<! Canvas {Hintergrund:#5151a2;} </style> </head> <body> <Canvas id = canvas width = 800 HEIGHEIT = 600> </body> </html>Der nächste Kern besteht darin, eine Windmühle in der nativen JS -Umgebung zu zeichnen 2D -Grafiken auf der Leinwand;
<script type = text/javaScript> // Erhalten Sie den 2D -Kontext des Abrufens der Leinwand.2. Zeichnen Sie die Windmühlenbasis
Die geometrische Figur der Windmühlenbasis sieht wie ein schlankes und schlankes Trapez aus. Schauen Sie sich den Code direkt an ~~!
// eine Funktion definieren, die untere Basis der Verpackungspflicht -Funktion buttom () {ctx.beginPath (); (0,#CCC); = Liner; Ausgangszeile CTX.LINETO (410.600);Schauen wir uns den Effekt auf der Seite an, ist es einfach?
(Ich habe das Gefühl, dass ich ein bisschen zu viel bin ~! ~!)
3. Zeichnen Sie die BlätterDer nächste Teil wird der kritischste Ort in dieser Animation sein. Kann auch in Ihrem Herzen Frage haben, zuerst Ihr Herz ziehen oder zuerst die Blätter lassen? Wie sollte die Form der Blätter gezeichnet werden? Können die Blätter kopiert und eingefügt werden? Die Antwort ist auf jeden Fall in Ordnung, lass es uns tun!
Denkanalyse:
1) Da die Form der drei Blätter genau gleich ist, müssen wir nur ein Blatt zeichnen. Nennen Sie es einfach die Bind () -Funktion! Überschneidung Ruf es einfach an! Warum! Ihr TM ist zu schlau
2) Drei Blätter haben ein rundes Herz. Die Translate () -Methode wird hier, das mobile Koordinatensystem, verwendet!
3) Am schwierigsten ist es zu verstehen, wie die Animation hier realisiert wird, da das Animationsprinzip die Dokumentstruktur unseres Gemäldes beeinflusst: die Struktur der Blätter:
Zunächst erstellen wir eine neue Zeichnungsumgebung, wir nennen es Umgebung 1, wir zeichnen das erste Blatt in der Umgebung 1; Das Aufrufen des Blattes auf der Oberseite () zeichnen die beiden Blätter; ;
Wenn wir Animation erreichen wollen, müssen wir nur die Zeichnungsumgebung 1 des ersten Blattes und das dritte Blatt durch die Referenzumgebung 1 als Benchmark gezeichnet. Überschneidung Barrage: 6666666
4) Am Ende werden einige grundlegende Erscheinungsstile debugged! Wie Gradienten, Transparenz usw.!
Zeichnen Sie die BlätterAls ich diese Blattform malt habe, debugge ich langsam.
Hier deklare ich eine variable var num = 0; Überschneidung Überschneidung
Var num = 0; Die Rotation des Koordinatensystems CTX.ROTATE ((math.pi/180)*num); . Zum ersten Mal ctx.beginPad (); System rotiert 120 ° CTX.Save (); *120) // das Koordinatensystem rotiert 120 ° CTX.Save (); ; #ccc); (Übersetzungskoordinatensystem) num+= 5;不停的变化 ， ****************************************************** ******************************************************** ******************************************************** ******************************************************** ************************************************************************* 30, -12) // (190, -3); , 12,30, 12);4. Setzen Sie Animation
Dieser Teil der Animation ist relativ einfach. Überschneidung Überschneidung
SetInterval (function () {ctx.clearRect);}, 50);Quellcode: https://github.com/224137748/canvas/blob/master/windmill.html
Das oben genannte ist der Inhalt dieses Artikels.