Leinwand können durch ein paar einfache APIs viele wundervolle Stile und schöne Effekte zeichnen.
Beim Malerei entspricht Leinwand Stoffe, und der Kontext entspricht Pinseln.
1. Zeichnen Sie LinienMOVETO (x0, y0): Bewegen Sie den aktuellen Pinsel (ICTX) in diese Position (x0, y0).
Lineto (x1, y1): Zeichnen Sie eine gerade Linie aus der aktuellen Position (x0, y0) zu (x1, y1).
beginPath (): Öffnen Sie einen Pfad oder setzen Sie den aktuellen Pfad zurück.
Closepath (): Zurück zum Ausgangspunkt des Pfades vom aktuellen Punkt, dh der Position des vorherigen BeginnPaths, der Vermeidung und des Pfades.
STROKE (): Zeichnen. Diese Funktion muss hinzugefügt werden, um Bilder zu zeichnen, daher muss dies am Ende platziert werden.
var icanvas = document.getElementById (icanvas); ();
Wirkung:
Beachten Sie hier, dass, wenn der Bleide hinter der Schlaganfallfunktion platziert wird, nicht in eine geschlossene Linie gezogen wird, da sie vor der Schließung gezogen wird, sodass die gerade Linie links nicht gezogen wird.
2. LinienstilLinecap: Line -Endpoint -Stil, Hintern, Rand, Quadrat.
LineJoin: Der Wendepunktstil Wenn sich die beiden Linien überschneiden.
Miterlimet: Wenn die Länge des Sediments den Wert von Miterlimit überschreitet, wird die Ecke in der Kegelziel -Linie angezeigt.
Linienbreite: Linienbreite
Strokestyle: Linienfarbe, Gradienten (definiertes Gradientenobjekt), Modus. context.strokesty =#333;
var icanvas = document.getElementById (icanvas); , 10); Wieder schwarz diagonal, insgesamt 3 Linien. ICTX.Strokestyle =#000000;
Beginpath und bot können nicht paarweise erscheinen.
3. Kurve ZeichnenARC (x, y, Radius, Startangle, Endangle, gegen den Uhrzeigersinn): Zeichnenkurve, Radius ist ein Kurvenradius, Startangel, Endangel -Startwinkel und Endwinkel mit ARC (math.pi/180)*Winkelwert, Anticlockw -ISE -Ziehrichtung Richtung Artikel
ARCTO (X1, Y1, X2, Y2, Radius): Zeichnen Sie die Kurve vor den beiden Schnittlinien.
ICTX.BeginPath (); / Erstellen bogens ictx.lineto (150,120);
Zeichnen Sie die Verbindung des Startpunkts und des horizontalen Endpunkts der horizontalen Linie zum Endpunkt der Einstellung der horizontalen Linie.
Quadratischcurveto (x1, y1, x2, y2): zwei Bessel -Kurve. (X1, y1) Die Koordinaten des Kontrollpunkts (x2, y2) Die Koordinaten des Endpunkts
BezierCurveto (x1, y1, x2, y2, x, y): Drei Bessel -Kurven. (X1, y1) Die Koordinaten des Kontrollpunkts 1, (x2, y2) Kontrollpunkt 2 Koordinaten (x, y) Endpunkte.
Die Bessel -Kurve ist sehr nützlich, wenn Sie einige sehr glatte Kurven zeichnen.
4. Rechteck zeichnen und füllenRect (): Rechteck erstellen;
Filect (X, Y, Breite, Höhe): Zeichnen
Strokerect (): Zeichnen Sie einen rechteckigen Drahtrahmen
ClearRect (): Löschen Sie das Rechteck.
ICTX.FillStyle =#0000ff;5. Stiftattribut
FILLSTYLE: Setzen Sie die Farbe, den Gradienten oder das Muster (Patten);
Strokestyle: Farbe, Verlauf oder Pinselmuster
6. Zeichnen Sie einen SchattenShadowColor: Shadow Yanse
Shadowblur: Unschärfes Level
ShadowOffsetX: Horizontaler Abstand des Schattens
Shadowoffsety: vertikale Distanz des Schattens
ICTX.Shadowblur = 20;7. Degradient zeichnen
Createlineargradient (x1, y1, x2, y2): Linearer Gradient zeichnen, (x1, y1) ist der Ausgangspunkt des Gradienten, (x2, y2) der Endpunkt des Gradienten.
Createuradialgradient (X1, Y1, R1, X2, Y2, R2): Radialgradienten: (x1, y1) ist der Ausgangspunkt des Gradienten, R1 ist der Radius (x2, y2) ist der Endpunkt des Gradienten, R2, R2 ist der Endpunktradius;
Beide Klassen müssen verwendet werden
AddColorsStop (Stopp, Farbe) wird so eingestellt, dass der Gradientenprozess eingestellt ist, und der Wert beträgt 0,0 bis 1,0.
var grd = ictx.createlinearadient (0,0,170,0); // Der Gradient ist ein Objekt, das den Wert an Fillstyle verwendet hat (200.150.150.100);8. Füllen Sie den Hintergrund aus
CreatePattrenn (Bild, Wiederholung | repeat-x | repeat-y | No-Repeat): Bild ist ein Bildobjekt, und die nachfolgenden Parameter werden verwendet, um die sich wiederholende Methode des Bildes festzulegen.
9. Andere verwandte APIsFILL (): Füllen Sie den aktuellen Pfad aus.
IspointinPath (): ICTX.ISPOINTINPATH (x, y);
Entfernen Sie die Leinwand: Holen Sie sich die Breite und Höhe der Leinwand, iCanvas.Height, icanvas.width;
Ändern Sie die Breite der Leinwand: icanvas.width = '200';
GlobalPHA: Setzen Sie die Transparenz, nur 0 ~ 1.
TODATAURL: ICANVAS.TODATAURL (Typ, Enkeln), diese Funktion gibt eine URI eines Image64 in Bild zurück, Parameter können Bildtypen wie Image/JPEG, Image/Webp, Standard -Image/P -Standard -NG einstellen Ist eine 0 ~ 1 -Nummer verwendet, um die Bildqualität von Bild/JPEG, Image/Webp festzulegen und in anderen Formaten einzugeben. Setzen Sie, dass dieser Parameter ungültig ist.
10. SchatzClip (): Die Leinwand jeder Form und Größe der Leinwand, und dann werden alle Zeichnungen auf den Schneiderbereich beschränkt. Diese Methode wird normalerweise mit Pfaden wie rechteckigen, runden Formen verwendet.
ICTX.ARC (100.100,50, (Mathematik.PI/180)*0, (Math.Pi/180)*360, True); ;
Wenn Sie die externe Leinwand noch bedienen möchten, verwenden Sie die Funktion Save (), um vor dem Schneiden zu speichern, und verwenden Sie die Funktion restore (), um den zuvor gespeicherten Zustand nach dem Schneiden wiederherzustellen, aber der Betrieb in der Mitte verschwindet nicht.
Das oben genannte ist der Inhalt dieses Artikels.