Was sind die Javascript-Canvas-Methoden?

Zu den Javascript-Canvas-Methoden gehören: createLinearGradient(), createPattern(), rect(), fillRect(), fill(), Stroke(), clip(), arc(), arcTo() usw.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

Das -Tag wird zum Zeichnen von Bildern verwendet (per Skript, normalerweise JavaScript).

Das -Element selbst verfügt jedoch über keine Zeichenfunktionen (es ist lediglich ein Container für Grafiken) – Sie müssen ein Skript verwenden, um das eigentliche Zeichnen durchzuführen.

Die Methode getContext() gibt ein Objekt zurück, das Methoden und Eigenschaften zum Zeichnen auf der Leinwand bereitstellt.

Javascript-Canvas-Methoden

Farben, Stile und Schatten

MethodecreateLinearGradient()createPattern()createRadialGradient()addColorStop()

Beschreibung
Erstellt einen linearen Farbverlauf (wird für Canvas-Inhalte verwendet).
Wiederholen Sie das angegebene Element in der angegebenen Richtung.
Erstellen Sie einen radialen/kreisförmigen Farbverlauf (wird für Leinwandinhalte verwendet).
Gibt die Farbe und die Stoppposition im Verlaufsobjekt an.

Rectangle

Methode rect()fillRect()StrokeRect()clearRect()

Beschreibung
Erstellt ein Rechteck.
Zeichnet ein „gefülltes“ Rechteck.
Zeichne ein Rechteck (ohne Füllung).
Löscht die angegebenen Pixel innerhalb des angegebenen Rechtecks.

Pfad

Methode fill()Stroke()beginPath()moveTo()closePath()lineTo()clip()quadraticCurveTo()bezierCurveTo()arc()arcTo()isPointInPath()

Beschreibung
Füllt die aktuelle Zeichnung (Pfad) aus.
Zeichne einen definierten Pfad.
Starten Sie einen Pfad oder setzen Sie den aktuellen Pfad zurück.
Bewegt den Pfad zum angegebenen Punkt im Canvas, ohne eine Linie zu erstellen.
Erstellt einen Pfad vom aktuellen Punkt zurück zum Startpunkt.
Fügt einen neuen Punkt hinzu und erstellt eine Linie im Canvas von diesem Punkt bis zum zuletzt angegebenen Punkt.
Schneiden Sie einen Bereich beliebiger Form und Größe aus der Originalleinwand aus.
Erstellen Sie eine quadratische Bezier-Kurve.
Erstellen Sie eine kubische Bezier-Kurve.
Bogen/Kurve erstellen (zum Erstellen von Kreisen oder Teilkreisen).
Erstellt einen Bogen/eine Kurve zwischen zwei Tangentenlinien.
Gibt „true“ zurück, wenn sich der angegebene Punkt im aktuellen Pfad befindet, andernfalls wird „false“ zurückgegeben.

Konvertieren

Methode scale()rotate()translate()transform()setTransform()

Beschreibung
Skalieren Sie die aktuelle Zeichnung auf eine größere oder kleinere Größe.
Dreht die aktuelle Zeichnung.
Ordnet die Position (0,0) auf der Leinwand neu zu.
Ersetzt die aktuelle Transformationsmatrix des Plots.
Setzen Sie die aktuelle Transformation auf die Identitätsmatrix zurück. Führen Sie dann transform() aus.

Text

Methode fillText()StrokeText()measureText()

Beschreibung
Zeichnet „gefüllten“ Text auf die Leinwand.
Zeichne Text auf die Leinwand (ohne Abstand).
Gibt ein Objekt zurück, das die angegebene Textbreite enthält.

Bildzeichnung

Methode drawImage()

Pixeloperationen

Beschreibung
Zeichnen Sie ein Bild, eine Leinwand oder ein Video auf die Leinwand.

Methode	Beschreibung
createImageData()	Erstellt ein neues, leeres ImageData-Objekt.
getImageData()	Gibt ein ImageData-Objekt zurück, das die Pixeldaten für das angegebene Rechteck auf der Leinwand kopiert.
putImageData()	Fügt Bilddaten (vom angegebenen ImageData-Objekt) zurück auf die Leinwand.

Andere

Methode	Beschreibung
save()	Speichert den Zustand der aktuellen Umgebung.
restore()	Gibt den zuvor gespeicherten Pfadstatus und die zuvor gespeicherten Pfadattribute zurück.
createEvent()
getContext()
toDataURL()

【Empfohlenes Lernen: Javascript Erweitertes Tutorial】

Das obige ist der detaillierte Inhalt vonWas sind die Javascript-Canvas-Methoden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!