HTML5-Leinwand-Zeichnungs-Tutorial (1) – Grundkenntnisse im Zeichnen

HTML5-Leinwand-Zeichnungs-Tutorial (1) – Grundkenntnisse im Zeichnen_HTML5-Tutorial

WBOY

Freigeben： 2016-05-16 15:50:21

Original

1493 Leute haben es durchsucht

Obwohl jeder Canvas als die neue Bezeichnung von HTML5 bezeichnet, scheint Canvas eine neue Kenntnis der HTML-Sprache zu sein, aber tatsächlich erfolgt das Canvas-Zeichnen über JavaScript. Wenn Sie also das Zeichnen auf Leinwand erlernen möchten, müssen Sie über eine Javascript-Grundlage verfügen.
Außerdem gibt es beim Zeichnen immer einige Bildbegriffe und Wissenspunkte. Wenn Sie also Erfahrung im Zeichnen oder in der Kunst haben, ist es einfacher, Canvas zu lernen.

Leinwand bedeutet Leinwand. Die Leinwand in HTML5 ist der Leinwand im wirklichen Leben wirklich sehr ähnlich. Daher kann es das Verständnis beschleunigen, wenn man es als physische Leinwand betrachtet.

Leinwand
Um mit Leinwand zu malen, benötigen Sie zunächst eine „Leinwand“. Wenn Sie keine Leinwand in Ihrem Bücherregal haben, können Sie eine Rolle kaufen und sie dort hineinlegen. Natürlich müssen wir kein Geld ausgeben, um es auf der Webseite zu kaufen, wir können einfach eine Leinwand schreiben, ähnlich wie:

Code kopieren

Der Code lautet wie folgt:

Der Text in der Beschriftung ist für Browser, die Canvas nicht unterstützen, und diejenigen, die es unterstützen, werden es nie sehen können.
Es ist notwendig, über die Eigenschaften dieser Leinwand zu sprechen. Sie verfügt über zwei native Attribute, nämlich Breite und Höhe. Da es sich gleichzeitig um ein HTML-Element handelt, kann es auch CSS zum Definieren von Breite und Höhe verwenden. Bitte beachten Sie: Die eigene Breite und Höhe unterscheidet sich von der über CSS definierten Breite und Höhe!
Wir verwenden JS, um die Breite und Höhe der Leinwand wie folgt zu ändern:

Kopieren Sie den Code

The Der Code lautet wie folgt:

canvas.width= 400
canvas.height = 300

Verwenden Sie jedoch JS, um die Breite und Höhe der Leinwand durch Bedienen zu ändern CSS sieht so aus:

Code kopieren

Der Code lautet wie folgt:

canvas .style.width = '400px'
canvas.style.height = '300px'

Es ist ersichtlich, dass der grammatikalische Unterschied offensichtlich ist. Tatsächlich ist der Unterschied deutlicher.

Was ist ihr Unterschied?
Zeichnen Sie beispielsweise auf einer Leinwand mit einer Breite von 1000 Pixeln eine vertikale Linie auf der linken Seite der Leinwand mit einer Breite von 100 Pixeln. Zu diesem Zeitpunkt stellen Sie die Breite der Leinwand selbst auf 500 ein, was einem Klicken aus der rechten Hälfte der Leinwand entspricht, aber die Breite der vertikalen Linie beträgt zu diesem Zeitpunkt immer noch 100.
Wenn Sie jedoch die Breite der Leinwand über CSS auf 500 ändern, entspricht dies einer Komprimierung der Leinwand von 1000 auf 500, sodass die Breite der vertikalen Linie 50 beträgt.
(Dies ist nur eine theoretische Situation. In der Praxis wird beim Festlegen der Breite der Leinwand der gezeichnete Inhalt gelöscht. )
Die Breite und Höhe der Leinwand selbst sind die Eigenschaften der Leinwand selbst, und die durch CSS angegebene Breite und Höhe kann als angesehen werden Bei zu lockerer Skalierung kann es sein, dass die Grafiken auf der Leinwand für Sie nicht mehr erkennbar sind.
Hier ist also ein Vorschlag: Sofern keine besonderen Umstände vorliegen, verwenden Sie kein CSS, um die Breite und Höhe der Leinwand zu definieren.
Die Leinwand ist da, jetzt nehmen wir sie heraus:

Kopieren Sie den Code

Der Code lautet wie folgt:

var cvs = document.getElementById('cvs');

Sehen Sie, es ist genau das Gleiche wie das Abrufen anderer Elemente.

Pinsel
Da Sie nun die Leinwand haben und Graffiti darauf auftragen möchten, benötigen Sie natürlich einen Stift. Die Methode für Canvas zum Abrufen des Stifts lautet wie folgt:
var ctx = cvs.getContext('2d'); Die Methode getContext wird zum Abrufen des Stifts verwendet, es gibt jedoch noch einen weiteren Parameter: 2d ?Sie können sehen, dass es sich bei diesem Gemälde um die Art des Pinsels handelt.
Da es 2D gibt, wird es dann auch 3D geben? Ich schätze, das wird es in Zukunft geben, aber nicht jetzt. Lassen Sie uns also zuerst diesen 2D-Stift verwenden.

Können wir also noch ein paar Stifte in Reserve legen? Die Antwort ist nein.
Ich möchte eine Frage stellen: Wie viele Stifte verwenden Sie gleichzeitig beim Zeichnen? Ich glaube, dass 99,9 % der Menschen nur eine verwenden können. Obwohl einige Kampfkunstmeister wie Xiao Longnu mit zwei Händen gleichzeitig zeichnen können, ist das für normale Menschen doch sehr unrealistisch, nicht wahr?
Jetzt können Sie erleichtert sein, denn der Canvas-Tag von HTML5 unterstützt nur die gleichzeitige Verwendung eines Stifts!
Einige Schüler, die mit dem Schreiben von JS besser vertraut sind, möchten vielleicht einen Streich spielen: Ich kann die vorherige Methode zum Erhalten von Pinseln verwenden, um ein paar Stifte mehr zu bekommen, ist das nicht genug? !
Zum Beispiel:

Code kopieren

Der Code lautet wie folgt:

var con = cvs .getContext('2d');
var ctx = cvs.getContext('2d');
Hahahaha, es scheint funktioniert zu haben, bevor ich es getestet habe, aber in Wirklichkeit war es nur eine Illusion!
Weil ich entdeckt habe, dass, wenn ich einen der Stifte in rote Tinte tauchte, der andere Stift automatisch in rote Tinte getaucht wurde! Denn die beiden Stifte sind eins! Scheiße.
Wenn Sie verschiedene Farben zeichnen müssen, können Sie diesen einzigen „Stift“ immer wieder in neue Farben tauchen.
Das ist eigentlich kein Vorteil, sondern ein Fehler, den Sie in Zukunft erkennen werden.

Koordinaten
Die 2D-Welt ist eine Ebene. Um einen Punkt auf einer Ebene zu bestimmen, sind zwei Werte erforderlich, die x-Koordinate und die y-Koordinate. Das ist ein sehr wichtiges Grundkonzept.
Der Ursprung der Leinwand ist die obere linke Ecke, genau wie beim Blitz. Aber das Ärgerliche ist, dass der Ursprung in der Mathematik in der unteren linken Ecke liegt. Man kann nur sagen, dass dies eine Gewohnheit ist

Ein gewisser gesunder Menschenverstand beim Zeichnen
Zuallererst müssen Sie wissen, welche Art von Koordinatenänderungen was zeichnen Linien? Wenn beispielsweise die x-Koordinate größer wird, die y-Koordinate jedoch unverändert bleibt, kann eine horizontale Linie gezeichnet werden. Wenn sich die y-Koordinate ändert, die x-Koordinate jedoch unverändert bleibt, kann eine vertikale Linie gezeichnet werden.
Natürlich gibt es auch Schrägstriche, linke Schrägstriche, rechte Schrägstriche usw. Wenn Sie sie mit den Bildern vergleichen können, ist es für die meisten Menschen deprimierender, sie nur mit Code zu zeichnen, und das können Sie nur Verlassen Sie sich auf logisches Denken.
Machen Sie sich keine Sorgen, wenn Sie sich jetzt wegen der Zeilen verwirrt fühlen, Sie werden sie ganz natürlich verstehen, wenn Sie lernen.

Andere
Ein Merkmal der Leinwand, das sich von der echten Leinwand unterscheidet, besteht darin, dass sie standardmäßig transparent ist und keine Hintergrundfarbe hat. Das ist meistens sehr wichtig.