In diesem Artikel wird hauptsächlich die Anleitung zur Verwendung der Canvas -Methode von HTML5 vorgestellt. Es ist sehr einfach und klar. Es ist ein sehr guter Artikel. Ich empfehle es Ihnen hier.
Canvas -Methode
Save () speichert den Status der aktuellen Umgebung
restore () gibt den Pfadstatus und die Eigenschaften zurück, die zuvor gespeichert wurden
CreateEvent ()
getContext () gibt ein Objekt zurück, das die erforderliche API für den Zugriff auf die Zeichnungsfunktion angibt
todataupl () gibt die URL des Canvas -Bildes zurück
Eigenschaften und Methoden der Linienstile
Eigentum:
Linecap Sets oder gibt den End -Endpoint -Stil der Linie zurück oder gibt es zurück
LineJoin setzt oder gibt den Ecktyp zurück, der erstellt wird, wenn sich zwei Zeilen überschneiden.
Die Linienbreite setzt oder gibt die Breite der aktuellen Linie zurück.
Miterlimit -Sätze oder Rückgabe die maximale Gehrungslänge
Farb-, Stil- und Schatteneigenschaften und Methoden
Eigentum
Fillstyle -Sätze oder Rückgabe der Farbe, des Verlaufs oder der Modus, die zum Ausfüllen des Gemäldes verwendet werden
Strokestyle -Set oder zurückgeben die Farbe, den Gradienten oder den für Striche verwendeten Modus
ShadowColor -Set oder zurückgeben die für den Schatten verwendete Farbe
Shadowblur setzt oder gibt die für Schatten verwendete Unschärfepegel ein oder gibt es zurück
ShadowOffsetX setzt oder gibt den horizontalen Abstand des Schattens in die Form ein oder gibt es zurück
Shadowoffsety setzt oder gibt den vertikalen Abstand des Schattens in die Form ein oder gibt es zurück
Verfahren
createlineargradient () erstellt einen linearen Gradienten (verwendet auf Canvas -Inhalt)
createPattrenn () wiederholt das angegebene Element in der angegebenen Richtung
createuradialgradient () erstellt Radial/Ring -Gradienten (verwendet auf Leinwandgehalt)
addcolorstop () Gibt die Farbe oder Stoppposition im Gradientenobjekt an
Pfadmethode
fill () füllt die aktuelle Zeichnung (Pfad)
Stroke () zeichnet den definierten Weg
BeginnPath () startet einen Pfad oder setzt den aktuellen Pfad zurück
MoveTo () verschiebt den Pfad zum angegebenen Punkt in der Leinwand, ohne Linien zu erstellen
Closepath () schafft einen Pfad vom Strompunkt zum Startpunkt
Lineto () fügt einen neuen Punkt hinzu, um eine Zeile von diesem Punkt zum letzten angegebenen Punkt zu erstellen
Clip () schneidet einen Bereich jeder Form und Größe aus der ursprünglichen Leinwand
Quadraticcurveto () erstellt die zweite Bezier -Kurve
Beziercureto () erstellt die letzte Bezier -Kurve
ARC () erstellt ARC/Kurve (zum Erstellen von Kreisen oder teilweisen Kreisen)
arcto () erstellt eine Bogen/Kurve zwischen zwei Tangenten
ispointinPath () gibt einen booleschen Wert zurück, wenn sich der angegebene Punkt im aktuellen Pfad befindet
Rechteck
Rect () erzeugt ein Rechteck
Fillrect () zeichnet das gefüllte Rechteck
Strokerect () zeichnet Rechteck (keine Füllung)
ClearRect () löscht angegebene Pixel innerhalb des angegebenen Rechtecks
Setzen Sie Texteigenschaften und Methoden
Eigentum:
Schriftart setzt oder gibt die aktuellen Schriftarten des Textinhalts ein oder gibt es zurück
Textalign Set oder zurückgeben die aktuelle Ausrichtung des Textinhalts
Die Einstellung von TextBaSeline gibt die aktuelle Textbasis zurück, die beim Zeichnen von Text verwendet wird.
Verfahren:
filtext () zeichnet gefüllten Text auf Leinwand
stroketext () zeichnet Text auf Leinwand (keine Füllung)
mesuretext () gibt ein Objekt zurück, das die angegebene Textbreite enthält
Konvertierungsmethode
scale () skaliert das aktuelle Diagramm auf größer oder kleiner
rotate () dreht die Stromzeichnung
translate () die (0,0) Position des Blumenhemds neu gestalten
Transformation () ersetzt die aktuelle Transformationsmatrix der Zeichnung
settransform () setzt die aktuelle Umwandlung in die Einheitsmatrix zurück. Dann run transform () rennen