Ua
En
Es
Fr
HTML Canvas-Referenz
HTML Canvas-Referenz
Das HTML-Tag <canvas> wird zum spontanen Zeichnen von Grafiken über Skripte (normalerweise JavaScript) verwendet.
Um mehr über <canvas> zu erfahren, lesen Sie bitte unser HTML Canvas-Tutorial.
Farben, Stile und Schatten
| Eigentum |
Beschreibung |
| fillStyle |
Legt die Farbe, den Farbverlauf oder das Muster zum Füllen der Zeichnung fest oder gibt sie 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 zu verwendende Farbe fest oder gibt sie zurück |
| shadowBlur |
Legt den Unschärfegrad für Schatten 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 |
| Verfahren |
Beschreibung |
| createLinearGradient() |
Erstellt einen linearen Farbverlauf (zur Verwendung auf Leinwandinhalten) |
| createPattern() |
Wiederholen Sie ein angegebenes Element in der angegebenen Richtung |
| createRadialGradient() |
Erstellt einen radialen/kreisförmigen Farbverlauf (zur Verwendung auf Leinwandinhalten) |
| addColorStop() |
Geben Sie die Farben und Stopppositionen in einem Verlaufsobjekt an |
Linienstile
| Eigentum |
Beschreibung |
| lineCap |
Legt den Stil der Endkappen für eine Linie fest oder gibt ihn zurück |
| lineJoin |
Legt den Typ der Ecke fest, die beim Treffen zweier Linien erstellt wird, oder gibt ihn zurück |
| lineWidth |
Legt die aktuelle Linienbreite fest oder gibt sie zurück |
| miterLimit |
Legt die maximale Gehrungslänge fest oder gibt sie zurück |
Rectangles
| Verfahren |
Beschreibung |
| rect() |
Erstellen Sie ein Rechteck |
| fillRect() |
Zeichnet ein „gefülltes“ Rechteck |
| strokeRect() |
Zeichnen Sie ein Rechteck (keine Füllung) |
| clearRect() |
Löscht die angegebenen Pixel innerhalb eines bestimmten Rechtecks |
Wege
| Verfahren |
Beschreibung |
| fill() |
Füllt die aktuelle Zeichnung (Pfad) |
| stroke() |
Zeichnet tatsächlich den von Ihnen definierten Pfad |
| beginPath() |
Beginnt 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 zu diesem Punkt vom zuletzt angegebenen Punkt im Canvas |
| clip() |
Schneidet einen Bereich beliebiger Form und Größe aus der ursprünglichen Leinwand aus |
| quadraticCurveTo() |
Erstellt eine quadratische Bézier-Kurve |
| bezierCurveTo() |
Erstellt eine kubische Bézier-Kurve |
| arc() |
Erstellt einen Bogen/eine Kurve (wird zum Erstellen von Kreisen oder Kreisteilen verwendet) |
| arcTo() |
Erstellt einen Bogen/eine Kurve zwischen zwei Tangenten |
| isPointInPath() |
Gibt true zurück, wenn der angegebene Punkt im aktuellen Pfad liegt, andernfalls false |
Transformationen
| Verfahren |
Beschreibung |
| scale() |
Skaliert die aktuelle Zeichnung größer oder kleiner |
| rotate() |
Dreht die aktuelle Zeichnung |
| translate() |
Ordnet die Position (0,0) auf der Leinwand neu zu |
| transform() |
Ersetzen Sie die aktuelle Transformationsmatrix für die Zeichnung |
| setTransform() |
Setzt die aktuelle Transformation auf die Identitätsmatrix zurück. Dann läuft transform() |
Text
| Eigentum |
Beschreibung |
| font |
Legt die aktuellen Schriftarteigenschaften für Textinhalte fest oder gibt sie zurück |
| textAlign |
Legt die aktuelle Ausrichtung für Textinhalte fest oder gibt sie zurück |
| textBaseline |
Legt die aktuelle Textgrundlinie fest, die beim Zeichnen von Text verwendet wird, oder gibt sie zurück |
| Verfahren |
Beschreibung |
| fillText() |
Zeichnet „gefüllten“ Text auf die Leinwand |
| strokeText() |
Zeichnet Text auf die Leinwand (keine Füllung) |
| measureText() |
Gibt ein Objekt zurück, das die Breite des angegebenen Texts enthält |
Bildzeichnung
| Verfahren |
Beschreibung |
| drawImage() |
Zeichnen Sie ein Bild, eine Leinwand oder ein Video auf die Leinwand |
Pixelmanipulation
| Eigentum |
Beschreibung |
| width |
Gibt die Breite eines ImageData-Objekts zurück |
| height |
Gibt die Höhe eines ImageData-Objekts zurück |
| data |
Gibt ein Objekt zurück, das Bilddaten eines angegebenen ImageData-Objekts enthält |
| Verfahren |
Beschreibung |
| createImageData() |
Erstellt ein neues, leeres ImageData-Objekt |
| getImageData() |
Gibt ein ImageData-Objekt zurück, das die Pixeldaten für das angegebene Rechteck auf eine Leinwand kopiert |
| putImageData() |
Platzieren Sie die Bilddaten (von einem angegebenen ImageData-Objekt) wieder auf der Leinwand |
Compositing
| Eigentum |
Beschreibung |
| globalAlpha |
Legt den aktuellen Alpha- oder Transparenzwert der Zeichnung fest oder gibt ihn zurück |
| globalCompositeOperation |
Legt fest oder gibt zurück, wie ein neues Bild auf ein vorhandenes Bild gezeichnet wird |
Andere
| Verfahren |
Beschreibung |
| save() |
Speichern Sie den Status des aktuellen Kontexts |
| restore() |
Gibt den zuvor gespeicherten Pfadstatus und die zuvor gespeicherten Attribute zurück |
| createEvent() |
|
| getContext() |
|
| toDataURL() |
|
