In diesem Artikel wird hauptsächlich 24 Grundkenntnisse der Canvas -Zusammenfassung vorgestellt, die sehr umfassend und detailliert ist und allen empfohlen wird.
Fassen Sie nun die Wissenspunkte von Leinwand wie folgt zusammen, damit sie jederzeit gelesen werden können.
1. Füllen Sie das Rechteck -FillRect (x, y, Breite, Höhe); 2. Zeichnen Sie den Rechteck -Rand -Strokerekt (X, Y, Breite, Höhe); 3.. Löschen Sie das Rechteck -ClearRect (x, y, Breite, Höhe); 4. Fillstyle = rot; Der Stil kann Farbe, Gradient und Bild sein. 5. Strokestyle = Rot; 6. Die Breite der Hub -Linien -Linienbreite = 4; 7. Die Form des Ende der Linie linecap = butt; Butt (Docking)/Runde (Kreis)/Quadrat (Quadrat), standardmäßig ist es stump; 8. Line Intersection Style Linejoin = Gehrung; Gehrung (scharfe Ecke)/runde (abgerundete Ecke)/Abschräg (Schrägecke), Standard -scharfe Ecke; 9. Zeichnen Sie den Pfad beginPath (); 10. Beenden Sie den Pfad Conepath (); Wenn Sie nach dem Erstellen des Pfads eine mit dem Startpunkt des Pfad verbundene Linie zeichnen möchten, können Sie Conepath () anrufen. 11. Zeichnen Sie Bogenbogen (X, Y, Radius, Startangle, Endangle, Richtig/Falsch); 12. Bogen arcto (x1, y1, x2, y2, radius) beginnt einen Bogen von einem Tag vom vorherigen Punkt bis x2, y2 zu zeichnen und durch den angegebenen Radius durch x1, y1 zu gelangen; 13. Moveto (x, y); Bewegen Sie den Zeichnungscursor auf (x, y), ohne Linien zu zeichnen 14. Lineto (x, y); Zeichnen Sie eine gerade Linie aus dem vorherigen Punkt 15. Quadratische Bezier -Kurve: quadratische Curveto (CX, Cy, X, Y); Zeichnen Sie die quadratische Kurve vom vorherigen Punkt aus, bis x, y, cx, cy als Kontrollpunkt dient. 16. Kubische Bezier -Kurve : BezierCurveto (CX1, Cy1, Cx2, Cy2, X, Y); Zeichnen Sie die quadratische Kurve vom vorherigen Punkt aus, bis x, y, cx1, cy1 und cx2, cy2 als Kontrollpunkte verwendet werden. 17. Rect (x, y, Breite, Höhe); Beginnen Sie von den Punkten x, y und der Breite und Höhe werden durch Breite und Höhe angegeben. Diese Methode zeichnet einen rechteckigen Pfad, keine separate Form. 18. Text zeichnen:(1) Text füllen: fillText (Hallo, x, y, Breite); Breite ist die optionale maximale Pixelbreite. Wenn der Text größer als die maximale Breite ist, schrumpft der Text auf die maximale Breite.
(2) Texthub: Stroketext (Hallo, X, Y, Breite); Breite ist die optionale maximale Pixelbreite.
(3) Textstil: Schrift = BOLD 14PX ARIAL;
(4) Horizontale Textausrichtung: textalign = 'start'; // Start, Ende, links, rechts, Mitte. Standardwert: Start. Richten Sie die vertikale Achse mit dem Startpunkt (x, y) des Textes als Basispunkt aus.
(5) Vertikale Textausrichtung: textbaseline = 'alphabetisch'; // Top, Hanging, Mitte, Alphabetic, IdeaGraphic, Bottom. Standardwert: Alphabetisch. Richten Sie die horizontale Achse mit dem Startpunkt (x, y) des Textes als Grundpunkt aus.
(6) Textbreite: var text = Hallo; var länge = context.measuretext (text); Parametertext ist der Text, der gezeichnet werden muss
19. Veränderung
(1) Drehen (Winkel): Drehen Sie den Winkelradian des Bildes um den Ursprung.
Sie können auch Transformation verwenden (Math.cos (Angle*math.pi/180), Math.sin (Angle*Math.pi/180),-Math.sin (Winkel*math.pi/180), Math.cos (Angle*math.pi/180), 0,0);
(2) Skalierung (x, y): Skalieren Sie das Bild. Sie können auch Transformation verwenden (x, 0,0, y, 0,0);
(3) Übersetzen (x, y): Bewegen Sie den Koordinatenursprung auf x, y. Nach der Durchführung dieser Transformation werden die Koordinaten 0 und 0 zum Punkt, der zuvor durch x, y dargestellt wird. Sie können auch Transformation verwenden (1,0,0,1, x, y);
(4) Transformation (<Nummer>, <nummer>, <nummer>, <nummer>, <nummer>, x, y);
(5) setTransform (<Nummer>, <nummer>, <nummer>, <nummer>, x, y); Setzen Sie die Transformationsmatrix in den Standardzustand zurück und rufen Sie dann Transformation () auf;
20. Grafische Kombination Kopieren Sie den Code