<canvas></canvas> ist ein neues Tag in HTML5, das zum Zeichnen von Grafiken verwendet wird. Tatsächlich ist dieses Tag dasselbe wie andere Tags. Seine Besonderheit besteht darin, dass dieses Tag ein CanvasRenderingContext2D-Objekt erhalten kann, das wir mit JavaScript verwenden können um dieses Objekt zum Zeichnen zu steuern.
<canvas></canvas> ist nur ein Container zum Zeichnen von Grafiken. Zusätzlich zu Attributen wie ID, Klasse und Stil verfügt es auch über Höhen- und Breitenattribute. Es gibt drei Hauptschritte zum Zeichnen auf dem <canvas>> -Element:
<canvas> -Element entspricht, bei dem es sich um ein Canvas-Objekt handelt. Das Folgende ist ein einfaches <canvas> -Zeichnungsbeispiel:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>Canvas-Zeichnungsdemonstration</title> <style type=text/css> #canvas{ border: 1px solid #ADACB0; display: block; margin: 20px auto; } </style></head><body> <canvas id=canvas width=300 height=300> Ihr Browser unterstützt Canvas noch nicht </canvas></body><script type=text/javascript> var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); //Legen Sie den Startpunkt des Objekts fest und Endpunkt context.moveTo(10,10); context.lineTo(200,200); //Setze den Stil context.lineWidth = 2; #F5270B; //Kontext zeichnen();</script></html>Wenn nicht über moveTo() angegeben, basiert der Startpunkt von lineTo() auf dem vorherigen Punkt. Wenn Sie den Startpunkt erneut auswählen müssen, müssen Sie daher die Methode moveTo() übergeben. Wenn Sie Stile für verschiedene Liniensegmente festlegen müssen, müssen Sie einen Pfad über context.beginPath() erneut öffnen. Hier ist ein Beispiel:
<script type=text/javascript> var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); //Setze den Startpunkt und den Endpunkt des Objekts context.moveTo(); 100,100); context.lineTo(700,100); context.lineWidth = 2; #F5270B; //Draw context.Stroke(); context.moveTo(100,200); //Der Effekt des Ersetzens von moveTo durch lineTo ist derselbe context.lineTo(600,400). ); //Wenn die Farbe von „StrokeStyle“ einen neuen Wert hat, wird der oben festgelegte Wert überschrieben. //Wenn „LineWidth“ keinen neuen Wert hat, wird er gemäß dem oben festgelegten Wert angezeigt context.Stroke();</script >
Zeichnen Sie Rechtecke rect(), fillRect() und StrokeRect()
<script type=text/javascript> var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); //Verwenden Sie die rect-Methode context.rect(10,10,190,190); context . fillStyle = #3EE4CB; context.StrokeStyle = #F5270B; //FillRect-Methode verwenden context.fillStyle = #1424DE; context.fillRect(210,10,190,190); //StrokeRect-Methode verwenden context.StrokeStyle = #F5270B; //StrokeRect-Methode verwenden und fillRect at gleichzeitig Methode context.fillStyle = #1424DE; context.StrokeStyle = #F5270B; context.strokeRect(610,10,190,190); context.fillRect(610,10,190,190);</script>
Hier müssen zwei Punkte erklärt werden: Der erste Punkt ist die Reihenfolge vor und nach dem Zeichnen von Stroke() und Fill(). Wenn Fill() später gezeichnet wird, wird der von Stroke() gezeichnete Rand größer, wenn er größer ist. wird offensichtlich abgedeckt. Der zweite Punkt: Wenn Sie das FillStyle- oder StrokeStyle-Attribut festlegen, können Sie es über die Einstellungsmethode von rgba(255,0,0,0.2) festlegen.
Es gibt noch eine weitere Möglichkeit, die sich auf das rechteckige Zeichnen bezieht: das Löschen des rechteckigen Bereichs: context.clearRect(x,y,width,height).
Die empfangenen Parameter sind: die Startposition des freien Rechtecks sowie die Breite und Länge des Rechtecks.
Fügen Sie im obigen Code am Ende der Zeichnung des Diagramms Folgendes hinzu:
context.clearRect(100,60,600,100);
Folgende Effekte können erzielt werden:
Zeichne einen fünfzackigen SternDurch die Analyse des fünfzackigen Sterns können wir die Regeln für die Koordinaten jedes Scheitelpunkts bestimmen. Dabei ist zu beachten: Auf der Leinwand ist die Richtung der Y-Achse nach unten gerichtet.
Der entsprechende Code lautet wie folgt:
var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); context.beginPath(); //Legen Sie die Koordinaten eines Scheitelpunkts fest und formulieren Sie einen Pfad basierend auf dem Scheitelpunkt für (var i = 0; i < 5; i++ ) { context.lineTo(Math.cos((18+i*72)/180*Math.PI)*200+200, -Math.sin((18+i*72)/180*Math.PI)*200+200); context.lineTo(Math.cos((54+i*72)/180*Math.PI)*80+ 200, -Math.sin((54+i*72)/180*Math.PI)*80+200 } context.closePath(); //Rahmenstil und Füllfarbe festlegen context.lineWidth=3; context.fillStyle = #F5270B;Endeffekt:
LinieneigenschaftenZusätzlich zum oben verwendeten lineWidth-Attribut verfügen Linien auch über die folgenden Attribute:
Die Eigenschaft lineCap legt den Stil des Zeilenendes am Ende der Zeile fest oder gibt ihn zurück. Sie kann die folgenden Werte annehmen:
Die lineJoin-Eigenschaft legt den Typ der Ecke fest, die beim Treffen zweier Linien erstellt wird, und kann die folgenden Werte annehmen:
Die Eigenschaft miterLimit legt die maximale Gehrungslänge fest oder gibt sie zurück (Standard ist 10). Die Gehrungslänge bezieht sich auf den Abstand zwischen den Innen- und Außenecken, an denen sich zwei Linien treffen. miterLimit ist nur gültig, wenn das lineJoin-Attribut mitre ist.
var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); //Testen Sie die lineCap-Eigenschaft //Legen Sie die Basislinie für die einfache Beobachtung fest context.lineTo(10,200); . moveTo(200,10); context.lineTo(200,200); context.lineWidth=1; context.beginPath(); context.lineTo(200,50); context.lineWidth=10; //round context.beginPath(); ; context.moveTo(10,100); context.lineTo(200,100); context.Stroke(); //square context.beginPath(); context.lineTo(200,150; context.lineWidth(); linJoin-Eigenschaft //miter context.beginPath(); context.moveTo(300,50); context.lineTo(300,150); context.lineJoin=10; context.beginPath(); context.lineTo(550,100); context.lineTo(400,150); context.lineJoin=round; context.lineWidth=10; //square context.beginPath(); context.lineTo(500,150); context.lineWidth=10; //Test miterLimit-Attribut context.beginPath(); context.moveTo(700,50); context.lineTo(850,100); context.lineJoin=miter; context.lineWidth=10; context.streiche();
Die Auswirkungen unterschiedlicher Werte für jedes Attribut sind wie folgt:
FüllstilZusätzlich zum Festlegen der Farbe können mit den zuvor verwendeten Füllstilen und Strichstilen auch andere Füllstile festgelegt werden. Hier nehmen wir den Füllstil als Beispiel:
linearer FarbverlaufNutzungsschritte
(1) var grd = context.createLinearGradient( xstart , ystart, xend , yend ) erstellt einen linearen Farbverlauf und legt die Start- und Endkoordinaten fest;
(2) grd.addColorStop(stop, color) fügt dem linearen Farbverlauf Farbe hinzu, stop hat einen Wert von 0 bis 1;
(3) context.fillStyle=grd wird dem Kontext zugewiesen.
radialer GradientDiese Methode ähnelt der linearen Gradientenmethode, außer dass die im ersten Schritt empfangenen Parameter unterschiedlich sind.
var grd = context.createRadialGradient(x0, y0, r0, x1, y1, r1); empfängt die Koordinaten und den Radius des Startkreismittelpunkts sowie die Koordinaten und den Radius des Endkreismittelpunkts.
Bitmap-AuffüllungcreatePattern( img , repeat-style) wird mit Bildern gefüllt und der Wiederholungsstil kann „repeat“, „repeat-x“, „repeat-y“ oder „no-repeat“ sein.
var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); //Linearer Farbverlauf var grd = context.createLinearGradient(10, 10, 100, 350); grd.addColorStop(0,#1EF9F7); grd.addColorStop(0.25,#FC0F31); grd.addColorStop(0.5,#ECF811); grd.addColorStop(1,#160303); context.fillStyle = grd; context.fillRect(10,10,100,350); grd = context.createRadialGradient(325, 200, 0, 325, 200, 200); grd.addColorStop(0,#1EF9F7); grd.addColorStop(0.5,#ECF811); ; grd.addColorStop(1,#160303); context.fillStyle = grd; context.fillRect(150,10,350,350); //Bitmap-Füllung var bgimg = new Image(); bgimg.onload= function (){ var pattern = context.createPattern(bgimg, repeat); context.fillStyle = pattern; context.strokeStyle=#F20B0B; context.fillRect(600, 100, 200,200);Der Effekt ist wie folgt:
Grafische TransformationÜbersetzung: context.translate(x,y), die empfangenen Parameter sind die Übersetzung des Ursprungs um x in Richtung der x-Achse und die Übersetzung von y in Richtung der y-Achse.
Skalierung: context.scale(x,y), die empfangenen Parameter sind, dass die x-Koordinatenachse entsprechend dem x-Anteil skaliert wird und die y-Koordinatenachse entsprechend dem y-Anteil skaliert wird.
Drehung: context.rotate(angle), der empfangene Parameter ist der Drehwinkel der Koordinatenachse.
Es ist zu beachten, dass die nächste Zeichnung nach dem Ändern der Grafik dem vorherigen Status folgt. Wenn Sie also zum ursprünglichen Status zurückkehren müssen, müssen Sie context.save(); und context.restore(); verwenden aktueller Stand:
var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); context.fillStyle = #1424DE; context.fillRect (0,0,200,200); context.restore(); //scale() context.save(); #F5270B; context.scale(0,5,0,5); context.restore(); context.fillStyle = #18EB0F; .PI / 4); context.fillRect(300,10,200,200);
Der Effekt ist wie folgt:
Eine weitere Sache im Zusammenhang mit der Grafiktransformation ist: Matrixtransformation: context.transform(a, b, c, d, e, f, g). Die Bedeutung der Parameter ist wie folgt:
eine horizontale Skalierung (Standard 1)
b horizontale Neigung (Standard 0)
c vertikale Neigung (Standard 0)
d vertikale Skalierung (Standard 1)
e horizontale Verschiebung (Standard ist 0)
f vertikale Verschiebung (Standard ist 0)
Der Leser kann die Auswirkungen jedes Parameters selbst überprüfen, und ich werde sie hier nicht einzeln vorstellen.
Kurve zeichnenEs gibt vier Funktionen zum Zeichnen von Kurven, nämlich:
context.arc(x,y,r,sAngle,eAngle,gegen den Uhrzeigersinn); wird zum Erstellen von Bögen/Kurven verwendet (zum Erstellen von Kreisen oder Teilkreisen). Die Bedeutung der empfangenen Parameter:
|. Parameter |. Bedeutung |
|. :--- |:---|
|. x |. x-Koordinate des Kreismittelpunkts |
|y|Y-Koordinate des Kreismittelpunkts|
|r|Kreisradius|
|sAngle|Startwinkel im Bogenmaß (die Drei-Uhr-Position des Bogenkreises beträgt 0 Grad)|
|eAngle|Endwinkel im Bogenmaß|
|gegen den Uhrzeigersinn|Optional. Gibt an, ob der Plot gegen den Uhrzeigersinn oder im Uhrzeigersinn gezeichnet werden soll. False = im Uhrzeigersinn, true = gegen den Uhrzeigersinn |
Hier sind einige Beispiele für mehrere arc()-Funktionen:
var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); context.StrokeStyle = #F22D0D; //Zeichne einen Kreis context.beginPath(); 40 ,0,2*Math.PI); context.Stroke(); //Zeichne einen Halbkreis context.beginPath(); context.arc(200,100,40,0,Math.PI); context.Stroke(); //Zeichne einen Halbkreis gegen den Uhrzeigersinn context.beginPath(); context.arc(300,100,40,0,Math.PI,true) ; context.Stroke(); //Zeichne einen geschlossenen Halbkreis context.beginPath(); context.arc(400,100,40,0,Math.PI); context.closePath();
Der Effekt ist wie folgt:
context.arcTo(x1,y1,x2,y2,r); Erstellt einen Bogen/eine Kurve auf der Leinwand zwischen zwei Tangenten. Die Bedeutung der empfangenen Parameter:
| Parameter | Bedeutung |
|---|---|
| x1 | x-Koordinate des Kontrollpunkts des Bogens |
| y1 | Die y-Koordinate des Kontrollpunkts des Bogens |
| x2 | x-Koordinate des Endpunkts des Bogens |
| y2 | Die y-Koordinate des Endpunkts des Bogens |
| R | Bogenradius |
Hierbei ist zu beachten, dass der Startpunkt der von der arcTo-Funktion gezeichneten Kurve über die Funktion moveTo() festgelegt werden muss. Die arcTo-Funktion wird unten verwendet, um ein abgerundetes Rechteck zu zeichnen:
function createRoundRect(context, x1, y1, width, height, radius) { // In die obere linke Ecke verschieben context.moveTo(x1 + radius, y1); // Ein mit der oberen rechten Ecke verbundenes Liniensegment hinzufügen context.lineTo (x1 + width - radius, y1); // Einen Bogen hinzufügen context.arcTo(x1 + width, y1, x1 + width, y1 + radius, radius); // Füge ein mit der unteren rechten Ecke verbundenes Liniensegment hinzu context.lineTo(x1 + width, y1 + height - radius); // Füge einen Bogen hinzu context.arcTo(x1 + width, y1 + height, x1); + width - radius, y1 + height , radius); // Füge ein Liniensegment hinzu, das mit der unteren linken Ecke verbunden ist context.lineTo(x1 + radius, y1 + height); Einen Bogen hinzufügen context.arcTo(x1, y1 + height, x1, y1 + height - radius, radius); // Ein mit der oberen linken Ecke verbundenes Liniensegment hinzufügen context.lineTo(x1, y1 + radius); ein Bogen context.arcTo(x1, y1, x1 + radius, y1, radius); Holen Sie sich das DOM-Objekt, das dem Canvas-Element entspricht. var canvas = document.getElementById('mc'); // Holen Sie sich das auf der Leinwand gezeichnete CanvasRenderingContext2D-Objekt. var context = canvas.getContext('2d'); context. StrokeStyle = #F9230B; createRoundRect(context, 30, 30, 400, 200, 50); context.Stroke();Der Effekt ist wie folgt:
context.quadraticCurveTo(cpx,cpy,x,y); Zeichnen Sie eine quadratische Bezier-Kurve. Die Parameterbedeutungen sind wie folgt:
| Parameter | Bedeutung |
|---|---|
| cpx | Die x-Koordinate des Bezier-Kontrollpunkts |
| cpy | Die y-Koordinate des Bezier-Kontrollpunkts |
| X | x-Koordinate des Endpunkts |
| j | y-Koordinate des Endpunkts |
Der Startpunkt der Kurve ist der letzte Punkt im aktuellen Pfad. Wenn der Pfad nicht existiert, verwenden Sie die Methoden beginPath() und moveTo(), um den Startpunkt zu definieren.
context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y); Zeichnen Sie eine kubische Bezier-Kurve mit den folgenden Parametern:
| Parameter | Bedeutung |
|---|---|
| cp1x | x-Koordinate des ersten Bezier-Kontrollpunkts |
| cp1y | Die y-Koordinate des ersten Bezier-Kontrollpunkts |
| cp2x | x-Koordinate des zweiten Bezier-Kontrollpunkts |
| cp2y | Die y-Koordinate des zweiten Bezier-Kontrollpunkts |
| X | x-Koordinate des Endpunkts |
| j | y-Koordinate des Endpunkts |
Es gibt hauptsächlich drei Eigenschaften und drei Methoden im Zusammenhang mit der Textwiedergabe:
| Eigentum | beschreiben |
|---|---|
| Schriftart | Legt die aktuellen Schriftarteigenschaften des Textinhalts fest oder gibt sie zurück |
| textAlign | Legt die aktuelle Ausrichtung des Textinhalts fest oder gibt sie zurück |
| textBaseline | Legt die aktuelle Textgrundlinie fest, die beim Zeichnen von Text verwendet wird, oder gibt sie zurück |
| Verfahren | beschreiben |
|---|---|
| fillText() | Zeichnen Sie gefüllten Text auf Leinwand |
| StrokeText() | Text auf Leinwand zeichnen (kein Abstand) |
| MeasureText() | Gibt ein Objekt zurück, das die angegebene Textbreite enthält |
Die grundlegende Verwendung der oben genannten Eigenschaften und Methoden ist wie folgt:
var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); context.font=bold 30px Arial; //Legen Sie den Stil fest context.StrokeStyle = #1712F4;Willkommen in meinem Blog! 30.100); context.font=bold 50px Arial; var grd = context.createLinearGradient( 30 , 200, 400, 300 );//Stellen Sie den Verlaufsfüllstil ein grd.addColorStop(0,#1EF9F7); grd.addColorStop(0.25,#FC0F31); grd.addColorStop(0.75); , #2F0AF1); grd.addColorStop(1,#160303); context.fillStyle = grd; context.fillText(Willkommen in meinem Blog!,30,200); context.moveTo(200,420) ; .Stroke(); context.font=bold 20px Arial; context.fillStyle = #F80707; context.textAlign=left; context.fillText(Der Text beginnt an der angegebenen Position, 200.300); context.textAlign=center; context.fillText(Die Mitte des Textes wird an der angegebenen Position platziert, 200.350); .textAlign= right; context.fillText(text endet an der angegebenen Position, 200, 400); context.moveTo(10,500); context.fillStyle=#F60D0D; context.font=bold 20px; context.fillText(angegebene Position ist oben, 10.500); context.textBaseline=bottom; context.fillText (angegebene Position ist unten, 150.500); context.textBaseline=middle; context.restore(); context.font=bold 40px Arial; #16F643; var text = Willkommen in meinem Blog! ; context.StrokeText(Willkommen in meinem Blog!,10,600); context.StrokeText(Die Breite der obigen Zeichenfolge ist: +context.measureText(text).width,10,650);
Der Effekt ist wie folgt:
Andere Eigenschaften und Methoden Schattenzeichnung:Fügen wir dem fünfzackigen Stern, den wir zuvor gezeichnet haben, einen Schatten hinzu
var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); context.beginPath(); //Legen Sie die Koordinaten eines Scheitelpunkts fest und formulieren Sie einen Pfad basierend auf dem Scheitelpunkt für (var i = 0; i < 5; i++ ) { context.lineTo(Math.cos((18+i*72)/180*Math.PI)*200+200, -Math.sin((18+i*72)/180*Math.PI)*200+200); context.lineTo(Math.cos((54+i*72)/180*Math.PI)*80+ 200, -Math.sin((54+i*72)/180*Math.PI)*80+200 } context.closePath(); //Rahmenstil und Füllfarbe festlegen context.lineWidth=3; context.fillStyle = #F5270B; context.shadowOffsetX = 30; shadowOffsetY = 30; context.shadowBlur = 2; context.fill();Der Effekt ist wie folgt:
Grafische Kombination:globalAlpha: Legt den aktuellen Alpha- oder Transparenzwert der Zeichnung fest oder gibt ihn zurück
Diese Methode dient hauptsächlich dazu, die Transparenz von Grafiken festzulegen, die hier nicht im Detail vorgestellt werden.
globalCompositeOperation: Legt fest oder gibt zurück, wie das neue Bild auf das vorhandene Bild gezeichnet wird. Diese Methode verfügt über die folgenden Attributwerte:
| Wert | beschreiben |
|---|---|
| Quelle-über | Quellbild über Zielbild anzeigen (Standard) |
| Quelle oben | Zeigt das Quellbild über dem Zielbild an. Die Teile des Quellbildes, die außerhalb des Zielbildes liegen, sind unsichtbar |
| Quelle-in | Zeigen Sie das Quellbild im Zielbild an. Nur der Teil des Quellbildes innerhalb des Zielbildes wird angezeigt; das Zielbild ist transparent |
| Quelle-out | Zeigt zusätzlich zum Zielbild das Quellbild an. Nur der Teil des Quellbildes außerhalb des Zielbildes wird angezeigt und das Zielbild ist transparent |
| Ziel vorbei | Zielbild über Quellbild anzeigen |
| Ziel oben | Zeigt das Zielbild über dem Quellbild an. Die Teile des Zielbildes, die außerhalb des Quellbildes liegen, sind unsichtbar |
| Ziel-in | Zeigt das Zielbild innerhalb des Quellbilds an. Es wird nur der Teil des Zielbilds innerhalb des Quellbilds angezeigt und das Quellbild ist transparent |
| Ziel-aus | Zeigt zusätzlich zum Quellbild das Zielbild an. Nur der Teil des Zielbilds außerhalb des Quellbilds wird angezeigt und das Quellbild ist transparent |
| leichter | Quellbild + Zielbild anzeigen |
| Kopie | Quellbild anzeigen. Zielbild ignorieren |
| xor | Kombinieren Sie Quell- und Zielbilder mithilfe der XOR-Operation |
Hier ein kleines Beispiel, wie die Kombination per Klick geändert werden kann:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>Grafikkombination</title> <style type=text/css> #canvas{ border: 1px solid #1C0EFA; : block; margin: 20px auto; Schriftgröße: 18px; Anzeige: links; Rand links: 20px; </style></head><body> <canvas id=1000 height=800> Ihr Browser unterstützt noch nicht Canvas </canvas> <div id=buttons> <a href=#>source-over</a> <a href=#>source-atop</a> <a href=#>Quelle-in</a> <a href=#>Quelle-aus</a> <a href=#>Ziel-über</a> <a href=#>Ziel-oben</a> <a href=#>destination-in</a> <a href=#>destination-out</a> <a href=#>lighter</a> <a href=#>copy</a> <a href=#>xor</a> </div></body><script type=text/javascript>window.onload = function(){ draw(source-over); var Buttons = document.getElementById(buttons). getElementsByTagName(a); for (var i = 0; i < Buttons.length; i++) { Buttons[i].onclick = function(){ draw(this.text }); }}; function draw(compositeStyle){ var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); //draw title context.font = fett 40px Arial; context.textAlign = center; context.textBasedline = middle.fillStyle = #150E0E; context.fillText(globalCompositeOperation = +compositeStyle, canvas.width/2, 60); //einen Rect zeichnen context.fillStyle = #F6082A; context.fillRect(300, 150, 500, 500); //einen Dreieckskontext zeichnen. globalCompositeOperation = zusammengesetzter Stil; context.fillStyle = #1611F5; context.beginPath(); context.lineTo(1000, 750); context.closePath(); </html>Leser können auf das Etikett klicken, um verschiedene Kombinationseffekte zu beobachten. Die Effekte sind wie folgt:
Beschneidungsbereich:Die Methode „clip()“ schneidet beliebige Formen und Größen aus der ursprünglichen Leinwand aus.
Tipp: Sobald Sie einen Bereich zuschneiden, sind alle nachfolgenden Zeichnungen auf den zugeschnittenen Bereich beschränkt (auf andere Bereiche auf der Leinwand kann nicht zugegriffen werden). Sie können den aktuellen Canvas-Bereich auch speichern, indem Sie die Methode save() verwenden, bevor Sie die Methode clip() verwenden, und ihn jederzeit in der Zukunft wiederherstellen (über die Methode restart()).
Das Folgende ist ein Beispiel für die Verwendung eines Kreises zum Abfangen eines Rechtecks:
var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); context.fillStyle = #0C0101; context.fillRect(0,0,canvas.width,canvas.height); context.beginPath(); context.fillStyle = #FFFDFD; context.arc(400,400,100,0,2*Math.PI); context.clip(); context.fillRect(200, 350, 400, 50);
Zusätzlich zu den oben genannten Attributen und Methoden gibt es auch die folgenden Methoden:
drawImage(): Zeichnet ein Bild, eine Leinwand oder ein Video auf die Leinwand.
toDataURL(): Grafiken speichern
isPointInPath(): Gibt true zurück, wenn der angegebene Punkt im aktuellen Pfad liegt, andernfalls false.
Ich werde hier nicht einzeln Beispiele nennen.
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.