Kommentar: Canvas bedeutet Leinwand. Die Leinwand in HTML5 ist der Leinwand im wirklichen Leben sehr ähnlich. Daher kann die Behandlung als echte Leinwand das Verständnis beschleunigen. Wenn Sie Leinwandzeichnung lernen möchten, müssen Sie eine JavaScript -Stiftung haben. Ich werde nicht viel sagen, auf den Punkt kommen.
Obwohl jeder Canvas ein neues Tag für HTML5 nennt, scheint es, dass Leinwand zum neuen Wissen der HTML -Sprache gehört. Tatsächlich erfolgt die Zeichnung von Leinwand durch JavaScript. Wenn Sie also Leinwandzeichnung lernen möchten, müssen Sie eine JavaScript -Stiftung haben.Wenn Sie Bilder zeichnen, gibt es immer einige Begriffe und Wissenspunkte in den Bildern. Wenn Sie also Erfahrung in der Herstellung von Bildern oder Kunst haben, ist es einfacher, Leinwand zu lernen.
Leinwand bedeutet Leinwand. Die Leinwand in HTML5 ist der Leinwand im wirklichen Leben sehr ähnlich. Wenn Sie ihn also als materielle Leinwand sehen, können Sie das Verständnis beschleunigen.
Leinwand
Um mit Leinwand zu zeichnen, müssen Sie zunächst eine Leinwand haben. Wenn Sie keine Leinwand in Ihrem Bücherregal haben, können Sie eine Rolle kaufen und einsetzen. Natürlich müssen wir kein Geld für die Webseite ausgeben, einfach eine Leinwand schreiben, ähnlich wie bei:
<Canvas> Ihr Browser unterstützt Canvas </canvas> nicht
Der Text im Tag ist für Browser, die keine Leinwand unterstützen, und die unterstützten werden niemals sichtbar.
Es ist notwendig, die Eigenschaften dieser Leinwand zu erwähnen. Es hat zwei native Eigenschaften, nämlich Breite und Höhe. Gleichzeitig kann er auch CSS verwenden, um Breite und Höhe zu definieren, da es sich auch um ein HTML -Element handelt. Achten Sie jedoch darauf, dass Sie aufmerksam sind: Ihre eigene Breite und Höhe unterscheiden sich von der Breite und der Höhe, die durch CSS definiert ist!
Wir verwenden JS, um die Breite und Höhe von Leinwand wie folgt zu ändern:
canvas.width = 400
canvas.height = 300
Mit JS, um die Breite und Höhe von Leinwand durch Betrieb von CSS zu ändern, ist dies jedoch wie folgt:
canvas.style.width = '400px' '
canvas.style.height = '300px'
Es ist ersichtlich, dass der grammatikalische Unterschied sehr offensichtlich ist. Tatsächlich ist der Unterschied offensichtlicher.
Was ist der Unterschied zwischen ihnen?
Zum Beispiel zeichnen Sie für eine Leinwand 1000 breit eine vertikale Linie auf der linken Seite der Leinwand, 100 Pixel breit. Zu diesem Zeitpunkt setzen Sie die Breite der Leinwand selbst auf 500, was gleichbedeutend mit der rechten Hälfte der Leinwand entspricht, aber zu diesem Zeitpunkt beträgt die Breite der vertikalen Linie immer noch 100.
Wenn Sie jedoch CSS verwenden, um die Breite der Leinwand auf 500 zu ändern, entspricht es der Extrudierung der Leinwand von 1000 bis 500, sodass die Breite der vertikalen Linie zu 50 wird.
(Dies ist nur eine theoretische Situation. Wenn Sie die Breite der Leinwand tatsächlich festlegen, wird der gezogene Inhalt gelöscht.)
Die eigene Breite und Höhe von Canvas sind Attribute der Leinwand selbst, und die von CSS angegebene Breite und Höhe kann als Skalierung angesehen werden. Wenn Sie zu beiläufig skalieren, können die Grafiken auf der Leinwand für Sie nicht wiederzuerkennen.
Es gibt also einen Vorschlag: Verwenden Sie nicht unter besonderen Umständen CSS, um die Breite und Höhe von Leinwand zu definieren.
Die Leinwand hat es und jetzt nehmen wir es heraus:
var cvs = document.getElementById ('CVS');
Schau, es ist genau das gleiche wie andere Elemente.
Bürste
Nachdem die Leinwand bereits verfügbar ist, möchte ich es darauf kritzeln, natürlich brauche ich auch einen Stift. Die Methode, einen Stift zu erhalten, lautet wie folgt:
var ctx = cvs.getContext ('2d'); Wo die GetContext -Methode verwendet wird, um einen Stift zu halten, aber hier gibt es einen weiteren Parameter: 2D. Was bedeutet das? Dies kann als eine Art Pinsel angesehen werden.
Da es 2D gibt, wird es 3D geben? Es wird wahrscheinlich einige in Zukunft geben, aber jetzt nicht. Verwenden wir also zuerst diesen 2D -Stift.
Können wir also noch ein paar Stifte verschaffen? Die Antwort ist nein.
Ich möchte eine Frage stellen: Wie viele Stifte verwenden Sie gleichzeitig beim Zeichnen von Bildern? Ich glaube, dass 99,9% der Menschen nur einen verwenden können. Obwohl einige Kampfkunstmeister wie Xiaolongnu gleichzeitig mit beiden Händen zeichnen können, ist dies für normale Menschen sehr unrealistisch, oder?
Jetzt können Sie sich erleichtert fühlen, da das HTML5 -Canvas -Tag auch nur mit einem Stift gleichzeitig verwendet wird!
Einige Schüler, die mit JS vertraut sind, möchten vielleicht klug sein: Ich benutze die Methode, um den Pinsel auf den vorherigen Weg zu bringen, um ein paar weitere Stifte zu bekommen. Würde es nicht genug sein? !
Zum Beispiel:
var con = cvs.getContext ('2d');
var ctx = cvs.getContext ('2d');
Hahahaha, es scheint erfolgreich zu sein. Ich dachte vor dem Test, aber tatsächlich ist dies nur eine Illusion!
Weil ich feststellte, dass ich einen der Stifte in rote Tinte getaucht habe und der andere Stift auch automatisch in rote Tinte getaucht wurde! Weil die beiden Stifte eins sind! Scheiße.
Wenn Sie verschiedene Farben zeichnen müssen, können Sie diesen einzigartigen Stift weiter in eine neue Farbe eintauchen.
Dies ist eigentlich kein Vorteil, es ist ein Defekt, Sie werden ihn in Zukunft erleben.
koordinieren
Die 2D -Welt ist ein Flugzeug. Um einen Punkt in einer Ebene zu bestimmen, sind zwei Werte, X-Koordinate und Y-Koordinate erforderlich. Dies ist ein sehr wichtiges Grundkonzept.
Der Ursprung der Leinwand ist die obere linke Ecke, die gleiche wie Flash. Aber was so nervig ist, ist, dass der Ursprung in der Mathematik die untere linke Ecke ist. Das...
Einige Grundkenntnisse über das Zeichnen
Zunächst müssen Sie wissen, welche Art von Koordinatenänderungen die Zeilen zeichnen werden? Wenn beispielsweise die X -Koordinate größer wird und die Y -Koordinate unverändert bleibt, kann eine horizontale Linie gezogen werden. Wenn sich die y -Koordinate ändert, die X -Koordinate bleibt unverändert, kann eine vertikale Linie gezogen werden.
Natürlich gibt es auch diagonale Linien, linke diagonale Linien und rechte diagonale Linien. Wenn Sie die Bilder vergleichen können, können die meisten Menschen sie gleichzeitig verstehen. Es ist deprimierender, mit Code zu zeichnen, und Sie können es nur durch logisches Denken vorstellen.
Wenn Sie sich jetzt verwirrt fühlen, machen Sie sich keine Sorgen, Sie werden sie natürlich während des Lernprozesses verstehen.
andere
Canvas hat eine andere Funktion als die reale Leinwand, nämlich standardmäßig transparent und hat keine Hintergrundfarbe. Dies ist die meiste Zeit sehr wichtig.