Gängige Zeichentechniken in Canvas in HTML5

In H5 verwenden wir häufig das canvas-Element zum Zeichnen von Grafiken. Deshalb stellen wir heute vor, wie man Leinwand verwendet und unter welchen Umständen Leinwand verwendet werden kann. Und Fähigkeiten zum Malen auf Leinwand

Leinwand wird zum Zeichnen von Grafiken auf der Seite verwendet

Leinwandübersicht:

HTML5-Leinwandelement und Javascript werden verwendet zusammen Grafiken auf der Seite zeichnen

Leinwand ist eine Leinwand, zeichne Pfade, Rechtecke, Kreise auf der Leinwand...

Leinwand erstellen

< ;Canvas-ID Breite Höhe>

Canvas-Zeichnungsgrafiken: ---》Javascript-Zeichnung

Canvas selbst verfügt nicht über die Zeichnung Fähigkeit, Zeichenarbeit Alles erfolgt in Javascript*****

js ruft das Element ab

element.getContext(“2d”) HTML5s integriertes Objekt, mit dem 2D-Grafiken gezeichnet werden können.

cxt.fillStyle = "#ff0000"; //Zeichne Füllfarbe

cxt. fillRect(25,10,150,75);//x, y,w,h bestimmen die Form 25,10 Startpunktkoordinaten

Hinweis: Leinwand

Ihr Browser unterstützt kein Canvas

Zeichnen von geraden Linien und Rechtecke

Linienlinien:

cxt.moveTo(10,10); Ursprünglicher Startpunkt

cxt.lineTo(150,50); Der Endpunkt des Originals Startpunkt ist der Startpunkt der nächsten geraden Linie derselben 2D-Grafik

cxt.Stroke(); Ausgabe

Rechteck:

cxt.StrokeStyle = "#ff0000"; Rechteck-Rahmenfarbe

cxt. StrokeRect(10,10, 50, 50); Rechteck-Koordinaten zeichnen

; Füllfarbe

cxt.fillRect(10,10,150,150); Füllposition

Zeichne einen Kreis:

1》 Html5 Grad des Kreises

2》 Zeichne einen Kreis

cxt.arc(x, y,radius,startAngle,endAngle, andere Parameter (true gegen den Uhrzeigersinn, falsch im Uhrzeigersinn)))

x,y-Startpunkt

Radius Radius

startAngle Startpunkt Grad

endAngle Endgrad

Dreieck zeichnen

BeginPath() Beginne mit dem Zeichnen des Pfads

Canvas-Element löschen:

Cxt. clearRect(x,y,width,height) Löscht die Canvas-Elemente

von (x, y) Breiten- und Höhenbereich Speichern und Wiederherstellen des Zustands der Leinwand

Cxt.save() speichert den Zustand

Cxt.restore() stellt den gespeicherten Zustand wieder her, einschließlich Rahmen- und Füllfarbe

Koordinaten verschieben Leerzeichen:

Übersetzen: Leinwandpunktbewegung

Übersetzen (150,150)

Original 0, 0 ---》150, 150

Das Obige ist Dies ist ein Überblick über das Canvas-Element, nachdem ich so viel gesagt habe. Weitere spannende Inhalte finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So verwenden Sie das

-Tag von HTML

So schreiben Sie die HTML-Dokumenttypdeklaration

HTML-Dropdown-Menücode

Das obige ist der detaillierte Inhalt vonGängige Zeichentechniken in Canvas in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!