Einzelheiten finden Sie in der Zusammenfassung der HTML5-Canvas Common API (2) -Drawing-API

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.

MOVETO (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.

Linecap: 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.

ARC (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.

Rect (): Rechteck erstellen;

Filect (X, Y, Breite, Höhe): Zeichnen

Strokerect (): Zeichnen Sie einen rechteckigen Drahtrahmen

ClearRect (): Löschen Sie das Rechteck.

 ICTX.FillStyle =#0000ff;

FILLSTYLE: Setzen Sie die Farbe, den Gradienten oder das Muster (Patten);

Strokestyle: Farbe, Verlauf oder Pinselmuster

ShadowColor: Shadow Yanse

Shadowblur: Unschärfes Level

ShadowOffsetX: Horizontaler Abstand des Schattens

Shadowoffsety: vertikale Distanz des Schattens

 ICTX.Shadowblur = 20;

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);

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.

FILL (): 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.

Clip (): 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.