HTML5-Leinwand-Zeichnungs-Tutorial, Fallanalyse_HTML5-Tutorial-Fähigkeiten

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:

Ihr Browser unterstützt kein Canvas< /canvas>

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.

Hinweis: Es ist notwendig, die Eigenschaften dieser Leinwand zu erwähnen, da sie wie IMG zwei native Attribute hat, nämlich Breite und Höhe Element, also Er kann auch CSS verwenden, um Breite und Höhe zu definieren, aber beachten Sie unbedingt: Seine eigene Breite und Höhe unterscheiden sich von der über CSS definierten Breite und Höhe!
Wir verwenden JS, um die native Breite und Höhe von Canvas 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 der Unterschied zwischen ihnen?
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 nativen 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 berücksichtigt werden B. bei der 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, den Stift von der Leinwand zu bekommen, ist wie folgt:

Kopieren Sie den Code

Der Code lautet wie folgt:

var ctx = cvs.getContext('2d');

La méthode getContext est utilisée pour obtenir le stylo, mais il y a un autre paramètre ici : 2d Qu'est-ce que cela signifie ? Cela peut être considéré comme le type de pinceau.
Puisqu’il y a de la 2D, alors il y aura de la 3D ? Je suppose qu'il y en aura dans le futur, mais pas maintenant. Utilisons donc d'abord ce stylo 2D.
Alors on peut mettre quelques stylos supplémentaires en réserve ? La réponse est non.
Je veux poser une question : combien de stylos utilisez-vous en même temps lorsque vous dessinez ? Je crois que 99,9 % des gens ne peuvent en utiliser qu'un. Bien que certains maîtres d'arts martiaux comme Xiao Longnu puissent dessiner à deux mains en même temps, c'est très irréaliste pour les gens ordinaires, n'est-ce pas ?
Alors maintenant, vous pouvez vous sentir soulagé, car la balise canvas de html5 ne prend en charge que l'utilisation d'un seul stylo à la fois !
Certains étudiants plus familiers avec l'écriture en JS voudront peut-être jouer un tour : je peux utiliser la méthode précédente d'obtention de pinceaux pour obtenir quelques stylos supplémentaires, n'est-ce pas suffisant ? !

Par exemple :

Copiez le code

Le code est le suivant :

var con = cvs.getContext('2d');
var ctx = cvs.getContext('2d');

Hahahaha, il semble pour réussir, mais non je le pensais avant le test, mais en fait ce n'était qu'une illusion !
Parce que j'ai découvert que lorsque je trempais l'un des stylos dans l'encre rouge, l'autre stylo était automatiquement trempé dans l'encre rouge ! Parce que les deux stylos ne font qu’un ! Putain.
Si vous avez besoin de dessiner des couleurs différentes, le moyen est de continuer à tremper ce seul « stylo » dans de nouvelles couleurs.
Ce n'est en fait pas un avantage, mais un défaut, dont vous vous rendrez compte à l'avenir.

Coordonnées
Le monde 2d est un plan Pour déterminer un point sur un plan, deux valeurs sont requises, la coordonnée x et la coordonnée y. C’est une notion de base très importante, mais comme tout le monde a étudié les mathématiques, je n’entrerai pas dans les détails.
L'origine de la toile est le coin supérieur gauche, la même que celle du flash. Mais ce qui est ennuyeux, c'est que l'origine des mathématiques se trouve dans le coin inférieur gauche. Ceci... Je peux seulement dire qu'on s'y habitue

Autres
Une caractéristique du canevas qui est différente du vrai canevas est qu'il est transparent par défaut et n'a pas de couleur de fond. C’est très important la plupart du temps.