Vorwort: Ich habe heute die Leinwand des JS -Buches gelesen. Ich bin so glücklich ~ Ich bin wieder meine geliebte Leinwand ~ OUYE ~
Ich habe jemanden gesehen, der mir vorschlug, einen blau -fetten Mann zu zeichnen, ja, warum habe ich den Lieblings -Blue Fat Man in meiner Kindheit vergessen? Um meine Entschuldigung gegenüber dem blauen fetten Mann auszudrücken, habe ich heute eine bewegende Hello -Welt gezogen, was auch eine Art Verbesserung ist ~
Okay, bitte gehen Sie nach innen für Passagiere. Bitte blockieren Sie die Passage nicht, danke. Lass uns fahren ~
Text:
Machen wir noch heute ein Foto und sehen den Effekt an
Heute sieht der fette blaue Mann so aus und ich bin erleichtert zu sehen, dass er immer noch so fett ist. Diese Welt ist immer noch voller positiver Energie, und es gibt immer noch Menschen, die dicker sind als ich, hahahaha
Dann der Code
HTML -Teil
<canvas id = "mycanvas"> GO und upgraden Ihren Browser ~ </canvas> auf
JS Teil
window.addeventListener ("load", function () {// den Canvas -Kontext var context = document.getElementById ("mycanvas"). als Grenzen der Uhr // einen großen Kreis außerhalb des Kontextes zeichnen. context.beginPath (); // Bewegen Sie den Ausgangspunkt auf (194.100) und berechnen Sie den Punktkontext. "#4ba2cf"; context.fill (); context.stroke (); // Der blaue Fettmann erstellt ~ // ein Bildobjekt und setze seinen SRC auf das Bild des blauen Fetts im Bild var bild = new Image (); Bild.src = "2.png"; // Verwenden Sie die Kontextmethode, um das Bild zu ziehen, und zeichnen Sie das Bild aus dem Punkt aus dem Punkt aus (25,25) und zeichnen Sie das Bild aus dem Punkt (25,25). context.drawimage (Bild, 25,25,150,150); // Verschieben der Transformationsmatrix // Nach dem Bewegen (100,100) als neuer Ursprung (0,0) Kontext. y // Das folgende X ist der Effekt nach dem Debuggen. Bitte passen Sie ihn nach verschiedenen Situationen an. Now Time (Kontext);}}, false);Die Zifferblätter der obigen Uhren werden angezeigt, aber der wichtigste Grund, warum die Uhr eine Uhr ist, ist, dass sie Zeit (Unsinn) anzeigen kann. Der nächste Schritt besteht darin, den Zeiger zu zeichnen.
Jetzt für den Zeitpunkt der Funktion
Funktion JETZT (Kontext) {// Erstellen Sie ein Datumsobjekt, um die lokale Zeit zu erhalten. mydate.getSeconds (); // Beschreiben Sie die Stunde // Verwenden Sie die Radian der aktuellen Stunde auf dem Dial Var HourC. // Verwenden Sie 3 Stunden als Ausgangspunkt des Umfangs und repräsentieren die Radians im Uhrzeigersinn, wenn (myHour <3) {stündlich = 2*math.pi- (3-myHour)*math.pi/6;}}}} {stündlich {stündlich {stündlich {stündlich {{stündlich {{stündlich {{{stündlich {{stündlich {{stündlich {{{stündlich) darstellt. (myHour-3)*math.pi/6;} // Wenn auf 3, 6, 9, 12 hingewiesen wird, ist es genau ein Vielfaches von 90 ° // Es gibt eine Abweichung von dem Winkel, das auf Radians konvertiert ist 9: HourArc = Math.pi; Break;} // Aufruf -DrawTime -Funktion und DrawTime (Kontext, HourArc, 60); // Minuten // Verwenden Sie den Radian var minarc auf dem Dial der aktuellen Minute auf dem Zifferblatt; // Verwenden Sie 15 Minuten als Ausgangspunkt des Umfangs, um den Radian im Uhrzeigersinn darzustellen, wenn (MyMin <15) {minarc = 2*math.pi- (15-mymin)*math.pi/30;} else {minarc = (MyMin-15)*Math.pi/30;} // MIDE AUFGEBNISSE (MYMIN-15). Math.pi*3/2; break; Fall 15: minarc = 0; break; Fall 30: minarc = math.pi/2; break; Fall 45: Minarc = math.pi; break;} // Aufruf -DrawTime -Funktion und DrawTime (Kontext, Minarc, Minark, 80); // Zeichnen von Sekunden // verwenden die aktuelle Sekundenstelle, um die Radian -Variz zu speichern. Radian im Uhrzeigersinn if (mySec <15) {Secarc = 2*Math.pi- (15-mysec)*Math.pi/30;} else {secarc = (MySec-15)*Math.pi/30;} // Verarbeitung für Sekunden, es ist immer noch hier, weil der Winkel zu Radiern konvertiert ist. Math.pi*3/2; break; Fall 14: Secarc = 0; Break; Fall 29: secarc = math.pi/2; Break; Fall 44: secarc = math.pi; break;} // Aufruf -DrawTime -Funktion und DrawTime (Kontext, Secarc, 80, "Red"); // Set a Timeout Call -Funktion. Zeichnen Sie natürlich einen neuen Zeiger, Sie sollten die ursprüngliche Stundenhand löschen.Wie zeichnen wir also speziell Zeiger, wenn wir den Kontext betreiben? Ich weiß auch nicht, also lass es uns heute beenden ~
Nur ein Scherz, hehe, mach es einfach (muss so tun, als würde ich mich mit dir anlegen)
Als nächstes kommt die DrawTime -Funktion mit insgesamt vier Parametern (Kontext, Thearc, Thelength, Color = "#000"). Der Kontext sieht den Kontext durch, der die Leinwand auf den ersten Blick ist, Thearc ist der Winkel, in dem wir die Leinwand drehen möchten, die Länge der Länge des Zeigers darstellt und die Farbe der Farbe des Zeigers ist.
Funktion DrawTime (Kontext, Thearc, Thelength, Color = "#000") {// die aktuelle Canvas -Umgebung speichern und in Verbindung mit der Wiederherstellungsmethode den Canvas -Kontext wiederherstellen. context.beginPath (); // Bewegen Sie den Startpunkt in (0,0) Kontext.Moveto (0,0); // Zeichnen Sie einen Pfad zu (Thelength, 0); // Zeichnen Sie diesen Pfad mit dem angegebenen Farb -Farbkontext. Wenn Sie den Pfad sehen möchten, müssen Sie einen Schlaganfall verwenden, um die Linie zu verfolgen. Wie man diese Zeile verfolgt, kann durch die verschiedenen oben verwendeten Attribute definiert werden.Obwohl es zu Ende geht, gibt es auch eine sehr wichtige ClearTime -Funktion. Ohne sie wird Ihre Uhr durch dichte Sekunden besetzt. Wir alle haben die Verantwortung, Patienten mit intensiver Phobie zu versorgen.
Funktion Cleartime (Kontext) {// Wir starten einen neuen Unterfaden und zeichnen dann einen Kreis voller schöner Blau, der die Zeiger abdeckt, die wir zuvor gezeichnet haben, was dem Dial -Context entspricht. Wurde auch zufällig verletzt, also beschwören Sie es erneut und Sie werden es sein, Pikachu (? Huh) var image = new Image (); Bild.src = "2.png"; // Diese Koordinate unterscheidet sich von den zum ersten Mal geladenen Koordinaten, weil wir die Transformationsmatrix modifiziert haben, erinnert man sich noch? Daher sollten ihre Koordinaten komplementärer Kontext sein.Nun, ok, es ist jetzt wirklich hier, es ist fast Zeit, eine Mahlzeit zu haben ~ Liebe süße Programmierer, denken Sie daran zu essen ~