Beschreibung Die HTML5 <canvas>
Doch das <canvas>
Die getContext() Methode gibt ein Objekt , das zum Zeichnen auf der Leinwand Methoden und Eigenschaften zur Verfügung stellt.
Diese Referenz wird die Eigenschaften und Methoden der Abdeckung getContext("2d") Objekt, das verwendet werden kann , Text, Linien, Rechtecke, Kreise zu zeichnen, und mehr - auf der Leinwand.
Browser-Unterstützung Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die das Element vollständig unterstützt.
Element <canvas> 4.0 9.0 2.0 3.1 9.0
Internet Explorer 9, Firefox, Opera, Chrome und Safari unterstützen <canvas>
Hinweis: Internet Explorer 8 und früheren Versionen nicht unterstützen das <canvas>
Farben, Formen und Schatten Eigentum Beschreibung fillStyle Setzt oder gibt die Farbe, Farbverlauf oder Muster verwendet, um die Zeichnung zu füllen strokeStyle Setzt oder gibt die Farbe, Farbverlauf oder Muster für Hüben verwendet shadowColor Setzt oder sendet die Farbe für Schatten zu verwenden shadowBlur Setzt oder sendet den Grad der Unschärfe für Schatten shadowOffsetX Setzt oder gibt den horizontalen Abstand des Schattens von der Form shadowOffsetY Setzt oder gibt den vertikalen Abstand des Schattens von der Form
Methode Beschreibung
createLinearGradient() Erstellt einen linearen Gradienten (zur Verwendung auf Leinwand Inhalt) createPattern() Wiederholt ein angegebenes Element in der angegebenen Richtung createRadialGradient() Schafft ein radial / kreisförmigen Gradienten (zur Verwendung auf Leinwand Inhalt) addColorStop() Gibt die Farben und Positionen in einem Gradienten Objekt stoppen
Linienstile Eigentum Beschreibung lineCap Setzt oder gibt den Stil der Endkappen für eine Linie lineJoin Setzt oder gibt den Typ der Ecke erstellt, wenn zwei Linien treffen lineWidth Setzt oder liefert die aktuelle Linienbreite miterLimit Setzt oder sendet die maximale Gehrung Länge
Rectangles Methode Beschreibung rect() Erstellt ein Rechteck fillRect() Zeichnet eine "gefüllt" Rechteck strokeRect() Zeichnet ein Rechteck (keine Füllung) clearRect() Löscht die angegebenen Pixel innerhalb eines gegebenen Rechtecks
Paths Methode Beschreibung fill() Füllt den aktuellen Zeichnung (Pfad) stroke() Tatsächlich zieht der Weg von Ihnen definierten beginPath() Beginnt ein Pfad oder setzt den aktuellen Pfad moveTo() Bewegt den Pfad zu dem bestimmten Punkt in der Leinwand, ohne eine einzige Zeile zu schaffen closePath() Erstellt einen Pfad vom aktuellen Punkt zurück zum Ausgangspunkt lineTo() Fügt einen neuen Punkt und schafft bis zu diesem Zeitpunkt aus dem letzten angegebenen Punkt in der Leinwand eine Linie clip() Clips einen Bereich von jeder Form und Größe von der ursprünglichen Leinwand quadraticCurveTo() Erzeugt eine quadratische Bézierkurve bezierCurveTo() Erstellt einen kubischen Bezier-Kurve arc() Erzeugt einen Bogen / Kurve (verwendet Kreise zu schaffen, oder Teile der Kreise) arcTo() Erzeugt einen Bogen / Kurve zwischen zwei Tangenten isPointInPath() Gibt true zurück, wenn der angegebene Punkt im Strompfad ist, sonst false
Transformations Methode Beschreibung scale() Scales die aktuelle Zeichnung größer oder kleiner rotate() Dreht die aktuelle Zeichnung translate() Ordnet die (0,0) Position auf der Leinwand transform() Ersetzt die aktuelle Transformationsmatrix für die Zeichnung setTransform() Setzt der Strom auf den Identitätsmatrix zu transformieren. Dann läuft transform ()
Text Eigentum Beschreibung font Setzt oder liefert die aktuellen Schrifteigenschaften für Textinhalt textAlign Setzt oder liefert die aktuelle Ausrichtung für Textinhalt textBaseline Setzt oder liefert die aktuelle Textbasislinie verwendet wird, wenn Text Zeichnung
Methode Beschreibung fillText() Unentschieden "gefüllt" Text auf der Leinwand strokeText() Zeichnet Text auf der Leinwand (ohne Füllung) measureText() Gibt ein Objekt zurück, das die Breite des angegebenen Text enthält
image Zeichnung Methode Beschreibung drawImage() Zeichnet ein Bild, Leinwand oder Video auf die Leinwand
Pixel-Manipulation Eigentum Beschreibung width Gibt die Breite eines Objekts Imagedata height Gibt die Höhe eines Objekts Imagedata data Liefert ein Objekt, das Bilddaten eines bestimmten Imagedata-Objekt enthält
Methode Beschreibung createImageData() Erstellt ein neues, leeres Objekt Imagedata getImageData() Gibt ein Imagedata-Objekt, das kopiert die Pixeldaten für das angegebene Rechteck auf einer Leinwand putImageData() Setzt die Bilddaten (von einem bestimmten Imagedata-Objekt) zurück auf die Leinwand
Compositing Eigentum Beschreibung globalAlpha Setzt oder liefert die aktuelle Alpha oder Transparenzwert der Zeichnung globalCompositeOperation Setzt oder gibt zurück, wie ein neues Bild gezeichnet werden auf ein vorhandenes Bild
Andere Methode Beschreibung save() Speichert den Zustand des aktuellen Kontext restore() Gibt zuvor gespeicherten Pfadzustand und Attribute createEvent() getContext() toDataURL()