Kommentar: Die Standardbreite und Höhe der Leinwand beträgt 300 und 150. Um Ausnahmen zu vermeiden, verwenden Sie am besten Anzeigeattribute, um sie hinzuzufügen, anstatt CSS zu verwenden, um Breite und Höhe hinzuzufügen. Nachfolgend finden Sie eine kurze Einführung in die Vorsichtsmaßnahmen für die Verwendung von Leinwand. Interessierte Freunde können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.
1. Canvas Chinese Tutorial https://developer.mozilla.org/zh-cn/docs/canvas_tutorial2. Die Standardbreite und Höhe der Leinwand beträgt 300 und 150. Um Ausnahmen zu vermeiden, verwenden Sie am besten Anzeigeattribute, um sie hinzuzufügen, anstatt CSS zu verwenden, um Breite und Höhe hinzuzufügen.
3.. Anweisungen zum Hinzufügen von Browsern, die das Canvas -Tag im Canvas -Tag nicht unterstützen
4.. Sie können auch feststellen, ob der Browser Leinwand über den folgenden JS -Code unterstützt.
var canvas = document.getElementById ('Tutorial');
if (canvas.getContext) {
var ctx = canvas.getContext ('2d');
// Code hier zeichnen
} anders {
// Canvas-nicht-unterstütztes Code hier
}
5. Leinwand unterstützt nur die Zeichnung einer grundlegenden Form, dh Rechtecke, aber andere Figuren können durch den Leinwandpfad gezogen werden.
6. Es gibt vier Funktionen zum Zeichnen eines Rechteck
7. Die Funktion von BeginnPath wird verwendet, um eine neue Pfadschicht zu starten. Wenn nicht hinzugefügt, bedeutet dies, auf die ursprüngliche Pfadebene zu zeichnen. Die Auswirkungen der folgenden zwei Codes sind völlig unterschiedlich. Der erste Code zeigt zwei rote Zeilen und der zweite Code zeigt eine schwarze Zeile und eine rote Zeile.
var ctx = document.getElementById ('cvs'). getContext ('2d');
ctx.beginPath ();
ctx.moveto (100,5,20,5);
Ctx.lineto (200,5, 20,5);
ctx.stroke ();
ctx.moveto (100,5,40,5);
ctx.lineto (200.5, 40,5)
ctx.strokestyle = '#f00';
ctx.stroke ();
var ctx = document.getElementById ('cvs'). getContext ('2d');
ctx.beginPath ();
ctx.moveto (100,5,20,5);
Ctx.lineto (200,5, 20,5);
ctx.stroke ();
ctx.beginPath ();
ctx.moveto (100,5,40,5);
ctx.lineto (200.5, 40,5)
ctx.strokestyle = '#f00';
ctx.stroke ();
8. Wenn der Pfad nicht geschlossen werden muss, kann Glossepath verwendet werden. Wenn die Füllung verwendet wird, wird der Pfad automatisch geschlossen. Es besteht keine Notwendigkeit, Gnerpath zu verwenden.
9. Solange Sie über ausreichende Geduld verfügen, können Sie die Bezier -Kurve verwenden, um eine beliebige Zahl zu zeichnen.
10. Es gibt einen Fehler in der quadratischen Kurve unter Firefox, sodass die kubische Kurve anstelle der quadratischen Kurve verwendet werden kann.
11. Bilder (wie PNG, GIF, JPEG usw.) können in Leinwand eingeführt werden, und andere Leinwandelemente können auch als Bildquelle verwendet werden.
12. Unten finden Sie den grundlegenden Canvas -Bildzeichnungscode, bei dem das Bild Bild oder Canvas -Objekt ist. X und Y sind ihre Startkoordinaten in der Ziel -Leinwand
Drawimage (Bild, x, y)
Der folgende Code repräsentiert das vergrößerte Bild, die Breite und die Höhe der Zoomgröße
Drawimage (Bild, x, y, Breite, Höhe)
Der folgende Code repräsentiert ein Ausschnittbild. Der erste Parameter ist der gleiche wie die anderen, beide sind Verweise auf das oder eine andere Leinwand. The other 8 parameters respectively represent the starting x coordinates of the cut in the picture, the starting y coordinates of the cut in the picture, the width of the cut area, the height of the cut area, the x coordinates of the drawn position, the y coordinates of the drawn position, the width of the drawn figure, the height of the drawn figure, the size of the cut area can be different from the size of the drawn figure, and will be scaled to the size of the gezeichnetes Bild.
Drawimage (Bild, SX, Sy, Swidth, Shight, DX, DY, Dwidth, Dheight)
13. Strokestyle wird verwendet, um die Farbe des grafischen Umrisss einzustellen, während Fillstyle verwendet wird, um die Füllfarbe einzustellen. Farbe kann ein String-, Gradientenobjekt oder ein Musterobjekt sein, das den CSS -Farbwert darstellt. Standardmäßig sind sowohl die Linien- als auch die Füllfarben schwarz (CSS -Farbwert Nr. 000000).
14. Bildtransparenz kann durch Globalalpha = Transparenzwert oder RGBA -Farbwert ausgedrückt werden
15. Die Linewidth -Eigenschaft setzt die Dicke der aktuell gezogenen Linie. Um den 1px -Leitungsweitfehler zu lösen, wird +0,5 verwendet, um ihn zu lösen.
16. Die Linie in der linken Linie des Linecap -Attributs verwendet den Standard -Hintern. Es kann angemerkt werden, dass es mit der Hilfslinie bündig ist. In der Mitte ist der Effekt der Runde und am Endpunkt wird ein Halbkreis mit einem Radius der halben Linienbreite hinzugefügt. Rechts ist der Effekt des Quadrats mit einem Quadrat mit gleicher Breite und einer Höhe der halben Linienbreite am Ende.
17. Hier verwende ich auch drei Polylines als Beispiel, um verschiedene Zeilenjoinwerte festzulegen. Der obere ist der Effekt von Rund, die Kanten und Ecken werden abgerundet und der Radius des Kreises entspricht der Linienbreite. Die Mitte und der Boden sind die Auswirkungen von Abschrägung bzw. Gehrung. Wenn der Wert Gehrung ist, erstreckt sich das Liniensegment außerhalb der Verbindung, bis es sich an einem Punkt kreuzt. Der Erweiterungseffekt wird durch das nachstehende Miterlimit -Attribut eingeschränkt
18. Die Speichern und Wiederherstellungsmethoden werden verwendet, um den Canvas -Status zu speichern und wiederherzustellen, und keine Parameter. Der Zustand der Leinwand ist eine Momentaufnahme aller Stile und Deformationen, die auf den aktuellen Bildschirm angewendet werden. Der Canvas -Staat wird in Form eines Haufens (Stack) gespeichert. Jedes Mal, wenn die Save -Methode aufgerufen wird, wird der aktuelle Zustand in den Haufen gedrückt und gespeichert. Jedes Mal, wenn die Wiederherstellungsmethode aufgerufen wird, taucht der vorherige gespeicherte Zustand aus dem Haufen auf und alle Einstellungen werden wiederhergestellt.
19. Transformation (1, 0, 0, 1, 0, 0) Parameter repräsentieren horizontale Skalierung, horizontale Drehung (im Uhrzeigersinn), vertikale Drehung (gegen den Uhrzeigersinn), vertikale Skalierung, horizontaler Versatz, vertikaler Versatz, vertikaler Versatz
setTransform (1, 0, 0, 1, 0, 0) bedeutet, die vorherige Transformationsmatrix zurückzusetzen und dann eine neue Matrix zu erstellen. Die Parameter sind die gleichen wie oben
Drehen Sie (Winkel), (ein Radius entspricht 1 Radian, 2πr/r = Radian, dh 360 = 2π, dh 1 = π/180).
20. Animation räumt tatsächlich ständig die Kunstboard (ClearRect ()) und dann neu gestrichen