Allgemeine Attributmethoden von HTML5 Canvas (Einführung)

Dieses Kapitel stellt Ihnen die allgemeinen Attributmethoden (Einführung) von HTML5 Canvas vor. Es hat einen gewissen Referenzwert. Ich hoffe, es wird Ihnen hilfreich sein.

Führen Sie zunächst das Tag ein .

Der zweite Schritt besteht darin, die 2D-Umgebung von Canvas abzurufen (var ctx = canvasDom.getContext('2d')).

Jetzt möchten Sie vielleicht etwas zeichnen. Bevor Sie etwas zeichnen, müssen Sie einige Dinge bestimmen, wie zum Beispiel:

　ctx.fillStyle: Dies ist ein Attribut, das zur Bestimmung der Füllfarbe verwendet wird. (Beim Füllen hängt alles mit dem Füllen zusammen)
ctx.StrokeStyle: Dies ist ein Attribut, das zur Bestimmung des „Stiftpfads“ (genau wie bei einer Linie) verwendet wird. (Beide Striche beziehen sich auf die Nachzeichnung)
ctx.shadow++: Dies verfügt über 4 Eigenschaften zum Festlegen des Schattens der gezeichneten Grafiken (shadowColor,shadowBlur,shadowOffsetX,shadowOffsetY),ich verwende sie daher nicht ihnen.
ctx.lineWidth: Dies ist das am häufigsten verwendete der vier Attribute zum Festlegen von Linienstilen (lineCap, lineJoin, lineWidth, miterLimit). Es legt die Linienbreite fest und der Wert ist eine Zeichenfolge mit px.
ctx.font: Hiermit legen Sie die Schriftgröße und den Schriftstil von text() fest. Der Wert kann „30px“ oder „30px Microsoft yahei“ sein. Arbeiten Sie gleichzeitig mit ctx.textAlign und ctx.baseline zusammen, um die Ausrichtungsposition und die Grundlinienposition festzulegen. Zeichnen Sie dann Text über ctx.filltext() oder ctx.StrokeText(), und ctx.measureText() gibt ein Objekt zurück, das Textinformationen wie Breite und Höhe enthält.

Nachdem Sie die oben genannten Grundattribute verstanden haben, können Sie etwas zeichnen:

Wenn Sie etwas anzeigen möchten, besteht der Vorgang wahrscheinlich darin, zuerst den Pfad zu erstellen (der Pfad ist unsichtbar) und dann Verwenden Sie ctx.fill() oder ctx.Stroke, um den Pfad zu füllen oder zu verfolgen.

Sie können ctx.rect(x,y,width,height) oder ctx.arc(x,y,radius,startAngle,endAngle,anticolorwise) verwenden, um zuerst einen Pfad zu erstellen und ihn dann zu füllen oder zu streichen.

Natürlich verfügt das Rechteck über ctx.fillRect() und ctx.StrokeRect(), um direkt ein sichtbares Quadrat zu erstellen. (Circle verfügt nicht über diese beiden Methoden)

Schließlich führen wir einen Tafellöscher ein – ctx.clearRect(x,y,weight,height), der zum Löschen aller Pixel in der Box verwendet wird.

Um Störungen durch den vorherigen Pfad zu verhindern, können Sie ctx.beginPath() verwenden, um den vorherigen Pfad vor jeder Zeichnung zu löschen.

Das Obige ist die grundlegende Verwendung von Canvas. Lassen Sie uns über einige fortgeschrittene (Yong) (Bu) Punkte (Shang) sprechen.

Verlaufsfüllung im rechteckigen Stil:

var grd = ctx.createLinearGradient(x0,y0,x1,y1);
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");
ctx.fillstyle = grd;
ctx.fillRect(x,y,w,h);

Dieser Schritt entspricht der Vordefinition eines Verlaufsstils (kann gefüllt oder gezeichnet werden) und dem Festlegen des Stils. Anschließend füllen oder nachzeichnen.

Es gibt auch createRadialGradient() und addColorStop, um den radialen Stil festzulegen.

Füllen von Medien (Bilder, Videos, andere Leinwände):　

var img = imgDom;
var pat = ctx.createPattern(img,"repeat");

Dann kann ctx.++Stil zum Füllen oder Zeichnen von Linien usw. gegeben werden . .

Es gibt vier Arten von Mustern: Wiederholung (Standard), Wiederholung x, Wiederholung y, keine Wiederholung.

Benutzerdefinierter Pfad:

Verwenden Sie ctx.moveTo(x,y);, um den Startpunkt des Pfades nach (x,y) zu verschieben Wenn Sie dann mit lineTo (x, y) zusammenarbeiten, können Sie den Pfad abrufen und anzeigen, indem Sie die Linie verfolgen.

Wenn Sie füllen möchten, der Pfad jedoch möglicherweise nicht geschlossen ist, können Sie natürlich ctx.closePath() verwenden, um den Pfad zu schließen und ihn dann zu füllen.

Leinwandschneiden:

Verwenden Sie ctx.clip(), um die Leinwand entsprechend dem aktuell geschlossenen Pfad zu schneiden.

Sie können den aktuellen Bereich über ctx.save() speichern und ihn dann über ctx.restore() wiederherstellen.

Zeichnen Sie einen Bogen:

Zeichnen Sie einen Bogen durch ctx.arcTo(x0,y0,x1,y1,radius); bestimmen Sie den Bogen durch zwei Punkte und den Radius , um den Pfad zu ermitteln, und füllen oder verfolgen Sie ihn dann nach Bedarf.

Beurteilen Sie, ob der Punkt innerhalb des Pfads liegt:

ctx.isPointInPath(); gibt einen booleschen Wert zurück, nichts zu sagen.

Es gibt eine Kurve namens Bezier:

Verwenden Sie zuerst ctx.moveTo(), um zum Startpunkt zu gelangen.

　ctx.quadraticCurveTo(c1x,c1y,edx,edy); Bezier-Kurve unter Verwendung des Startpunkts und eines Kontrollpunkts plus dem Endpunkt;

　ctx.beizierCurveTo(c1x,c1y,c2x, c2y ,edx,edy); Bezier-Kurve, gezeichnet unter Verwendung von zwei Kontrollpunkten.

Grafikkonvertierung:

　ctx.scale(w,h); Vergrößern w>1 bedeutet Vergrößern in der Breite, h bedeutet in der Höhe.

ctx.rotate(r); r ist die Bogenmaßeinheit, z. B. 20 Grad: 20*Math.PI/180. im Uhrzeigersinn.

　ctx.translate(x,y) legt die Position von (0,0) auf der Leinwand fest und (x,y) ist die aktuelle Position von (0,0).

　ctx.transform(a,b,c,d,e,f); jeweils horizontale Skalierung, horizontale Neigung, vertikale Neigung, vertikale Skalierung, horizontale Verschiebung und vertikale Verschiebung. Diese Eigenschaft wird überlagert und ist für die nächste Grafik wirksam.

　ctx.setTransform(a,b,c,d,e,f); Wie oben definiert dieses Attribut eine Transformation neu und ist für die nächste Grafik gültig.

drawImage():

ctx.drawImage(dom,arg1,arg2,arg3,arg4,arg5,arg6,arg7,arg8); Sie können höchstens 8 Parameter übergeben, 2 dienen der Positionierung des Bildes (Originalgröße), 4 dienen der Positionierung des Bildes entsprechend der Größe und 8 dienen der Positionierung des Bildes nach dem Schneiden (jeweils: Schnittbeginn x, y, Schnittgröße w). , h, Positionierungsposition x, y, Größe w, h).

GlobalAipha-Attribut: Globale Transparenz festlegen. (Bereits lackierte Exemplare sind davon nicht betroffen).

Das Attribut globalCompositeOperation legt die Stapelreihenfolge der vorherigen und nächsten überlappenden Bereiche fest, einschließlich „Quelle-über“ und „Ziel-über“, welcher darüber und welcher darunter liegt.

Das obige ist der detaillierte Inhalt vonAllgemeine Attributmethoden von HTML5 Canvas (Einführung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!