Leitfaden zur Verwendung der HTML5-Canvas-Methode_HTML5-Tutorial-Fähigkeiten

Canvas-Methode

save() speichert den Zustand der aktuellen Umgebung

„restore()“ gibt den zuvor gespeicherten Pfadstatus und die Attribute zurück

createEvent()

getContext() gibt ein Objekt zurück, das die API angibt, die für den Zugriff auf die Zeichenfunktion erforderlich ist

toDataUPL() gibt die URL des Leinwandbildes zurück

Eigenschaften und Methoden von Linienstilen

Attribut:

lineCap legt den Endpunktstil der Linie fest oder gibt ihn zurück

lineJoin legt den Ecktyp fest, der erstellt wird, wenn sich zwei Linien schneiden, oder gibt ihn zurück

lineWidth legt die Breite der aktuellen Zeile fest oder gibt sie zurück.

miterLimit legt die maximale Gehrungslänge fest oder gibt sie zurück

Farb-, Stil- und Schatteneigenschaften und -methoden

Attribute

fillStyle legt die Farbe, den Farbverlauf oder das Muster zum Füllen des Gemäldes fest oder gibt es zurück

StrokeStyle legt die für Striche verwendete Farbe, den Farbverlauf oder das Muster fest oder gibt sie zurück

shadowColor legt die für Schatten verwendete Farbe fest oder gibt sie zurück

shadowBlur legt den für Schatten verwendeten Unschärfegrad fest oder gibt ihn zurück

shadowOffsetX legt den horizontalen Abstand des Schattens von der Form fest oder gibt ihn zurück

shadowOffsetY legt den vertikalen Abstand des Schattens von der Form fest oder gibt ihn zurück

Methode

createLinearGradient() erstellt einen linearen Farbverlauf (wird für Leinwandinhalte verwendet)

createPattern() wiederholt das angegebene Element in der angegebenen Richtung

createRadialGradient() erstellt einen radialen/kreisförmigen Farbverlauf (wird für Leinwandinhalte verwendet)

addColorStop() gibt die Farbe oder Stoppposition im Verlaufsobjekt an

Pfadmethode

fill() füllt die aktuelle Zeichnung (Pfad)

Stroke() zeichnet einen definierten Pfad

beginPath() startet einen Pfad oder setzt den aktuellen Pfad zurück

moveTo() verschiebt den Pfad zum angegebenen Punkt im Canvas, ohne eine Linie zu erstellen

closePath() erstellt einen Pfad vom aktuellen Punkt zurück zum Startpunkt

lineTo() fügt einen neuen Punkt hinzu und erstellt eine Linie von diesem Punkt zum zuletzt angegebenen Punkt

clip() schneidet einen Bereich beliebiger Form und Größe aus der Originalleinwand aus

quadraticCurveTo() erstellt eine zweite Bezier-Kurve

bezierCureTo() erstellt eine subquadratische Bezier-Kurve

arc() erstellt einen Bogen/eine Kurve (wird zum Erstellen von Kreisen oder Teilkreisen verwendet)

arcTo() erstellt einen Bogen/eine Kurve zwischen zwei Tangenten

isPointInPath() gibt einen booleschen Wert zurück, wenn sich der angegebene Punkt im aktuellen Pfad

befindet

Rechteck

Rect() erstellt ein Rechteck

fillRect() zeichnet ein „gefülltes“ Rechteck

StrokeRect() zeichnet ein Rechteck (keine Füllung)

clearRect() löscht die angegebenen Pixel innerhalb des angegebenen Rechtecks

Texteigenschaften und -methoden festlegen

Attribute:

Schriftart Legt das aktuelle Schriftartattribut des Textinhalts fest oder gibt es zurück

textAlign legt die aktuelle Ausrichtung des Textinhalts fest oder gibt sie zurück

Die Einstellung textBaseline gibt die aktuelle Textgrundlinie zurück, die beim Zeichnen von Text verwendet wird.

Methode:

fillText() zeichnet „gefüllten“ Text auf der Leinwand

StrokeText() zeichnet Text auf der Leinwand (kein Abstand)

measureText() gibt ein Objekt zurück, das die angegebene Textbreite enthält

Konvertierungsmethode

Scale() skaliert die aktuelle Zeichnung auf eine größere oder kleinere Größe

rotate() dreht die aktuelle Zeichnung

translator() ordnet die (0,0)-Position des Blumenhemdes neu zu

transform() ersetzt die aktuelle Transformationsmatrix der Zeichnung

setTransform() setzt die aktuelle Transformation auf die Identitätsmatrix zurück. Führen Sie dann transform()

aus