HTML5 -Leinwand -Zeichnungs -Tutorial (1) - Grundkenntnisse über Zeichnen

Obwohl jeder Canvas ein neues Tag für HTML5/"> HTML5 nennt, scheint es, dass Leinwand zum neuen Wissen der HTML -Sprache gehört. Tatsächlich erfolgt die Zeichnung von Leinwand jedoch durch JavaScript. Wenn Sie also eine 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.

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 ID = "CVS"> Ihr Browser unterstützt keine Leinwand </canvas>

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 Attribute, 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.

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.

Nachdem die Leinwand 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 in der Zukunft sein, aber nicht jetzt. 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.

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...

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.

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.