Canvas-Referenz
Das HTML5 <canvas>-Element wird zum Zeichnen von Grafiken über Skripte verwendet (üblicherweise JavaScript). Das <canvas>-Element bietet jedoch keine eigenen Zeichenmöglichkeiten. Um Grafiken zu zeichnen, müssen Sie ein Skript verwenden, da das <canvas>-Element lediglich ein Container für Grafiken ist.
Die Methode getContext() gibt ein Objekt zurück, das Eigenschaften und Methoden zum Zeichnen auf der Zeichenfläche bereitstellt.
Farben, Stile und Schatten
| Property | Description |
|---|---|
| fillStyle | Legt die Farbe, den Farbverlauf oder das Muster fest, das zum Füllen der Formen verwendet wird, oder gibt dieses zurück. |
| strokeStyle | Legt die Farbe, den Farbverlauf oder das Muster für die Linien um die Formen herum fest, oder gibt dieses zurück. |
| shadowColor | Legt die Farbe der Schatten fest, oder gibt diese zurück. |
| shadowBlur | Legt den Unschärfegrad der Schatten fest, oder gibt diesen zurück. |
| shadowOffsetX | Legt den x-Versatz des Schattens fest, oder gibt diesen zurück. |
| shadowOffsetY | Legt den y-Versatz des Schattens fest, oder gibt diesen zurück. |
| Method | Description |
|---|---|
| createLinearGradient() | Erstellt einen linearen Farbverlauf für die Verwendung auf dem Canvas-Inhalt. |
| createPattern() | Wiederholt ein bestimmtes Element in der angegebenen Richtung. |
| createRadialGradient() | Erstellt einen kreisförmigen/radialen Farbverlauf für die Verwendung auf dem Canvas-Inhalt. |
| addColorStop() | Definiert Farben und Stopp-Positionen im Farbverlauf-Objekt. |
Linienstile
| Property | Description |
|---|---|
| lineCap | Legt den Stil der Linienenden fest, oder gibt diesen zurück. |
| lineJoin | Legt die Art der gezeichneten Ecken fest, oder gibt diese zurück. |
| lineWidth | Legt die Breite der aktuellen Linie fest, oder gibt diese zurück. |
| miterLimit | Legt die maximale Miter-Länge fest, oder gibt diese zurück. |
| lineDash | Legt ein Array von Zahlen fest, das das Linienstrichmuster angibt, oder gibt dieses zurück. |
| lineDashOffset | Legt den Versatz für Linienstrichmuster fest, oder gibt diesen zurück. |
Rechtecke
| Method | Description |
|---|---|
| rect() | Erstellt Rechtecke. |
| fillRect() | Zeichnet ausgefüllte Rechtecke. |
| strokeRect() | Zeichnet rechteckige Umrisse. |
| clearRect() | Löscht die angegebenen Pixel innerhalb eines bestimmten Rechtecks. |
Pfade
| Method | Description |
|---|---|
| fill() | Füllt die aktuellen Teilpfade mit dem aktuellen fillStyle. |
| stroke() | Zeichnet die Umrisse der aktuellen Teilpfade mit dem aktuellen strokeStyle. |
| beginPath() | Beginnt einen neuen Pfad oder setzt den aktuellen Pfad zurück. |
| moveTo() | Verschiebt den Pfad zum angegebenen Punkt auf dem Canvas, ohne eine Linie zu zeichnen. |
| closePath() | Fügt einen Pfad vom aktuellen Punkt zurück zum Startpunkt hinzu. |
| lineTo() | Fügt eine Linie zum aktuellen Teilpfad hinzu. |
| clip() | Erstellt einen Ausschneidebereich aus dem aktuellen Pfad. |
| quadraticCurveTo() | Fügt eine quadratische Bézier-Kurve hinzu. |
| bezierCurveTo() | Fügt eine kubische Bézier-Kurve hinzu. |
| arc() | Fügt einen Bogen/eine Kurve hinzu, um Kreise oder Kreisabschnitte zu erstellen. |
| arcTo() | Fügt einen Bogen/eine Kurve zwischen zwei Tangenten hinzu. |
| isPointInPath() | Bestimmt, ob der angegebene Punkt im aktuellen Pfad liegt oder nicht. |
Transformationen
| Method | Description |
|---|---|
| scale() | Vergrößert oder verkleinert die aktuelle Zeichnung. |
| rotate() | Dreht die aktuelle Zeichnung. |
| translate() | Passt das Koordinatensystem des Canvas an. |
| transform() | Wendet eine Transformationsmatrix auf den Canvas an. |
| setTransform() | Ist ähnlich wie transform(). Kann verwendet werden, um den Canvas zu verzerren, zu skalieren und zu verschieben. |
Text
| Property | Description |
|---|---|
| font | Legt das Erscheinungsbild eines auf dem Canvas gezeichneten Textes fest. |
| textAlign | Legt die Ausrichtung eines auf dem Canvas gezeichneten Textes fest. |
| textBaseline | Legt die vertikale Ausrichtung eines auf dem Canvas gezeichneten Textes fest. |
| Method | Description |
|---|---|
| fillText() | Fügt Text zum Canvas hinzu. |
| strokeText() | Fügt umrandeten Text zum Canvas hinzu. |
| measureText() | Misst die Textbreite. |
Bildzeichnung
| Method | Description |
|---|---|
| drawImage() | Zeichnet ein Bild, Video oder Canvas auf den Canvas. |
Pixelmanipulation
| Property | Description |
|---|---|
| width | Gibt die Breite eines ImageData-Objekts zurück. |
| height | Gibt die Höhe eines ImageData-Objekts zurück. |
| data | Gibt ein Uint8ClampedArray zurück, das die Pixeldaten enthält. |
| Method | Description |
|---|---|
| createImageData() | Erstellt ein neues ImageData-Objekt. |
| getImageData() | Gibt ein ImageData-Objekt zurück, das die Pixeldaten für das angegebene Rechteck kopiert. |
| putImageData() | Überträgt die Bilddaten aus dem ImageData-Objekt auf den Canvas. |
Kompositing
| Property | Description |
|---|---|
| globalAlpha | Legt den aktuellen Alpha-/Transparenzwert fest, oder gibt diesen zurück. |
| globalCompositeOperation | Legt die Art der Kompositoperation fest, wenn ein neues Bild gezeichnet wird, oder gibt diese zurück. |
Sonstiges
| Method | Description |
|---|---|
| save() | Speichert den aktuellen Zustand eines Kontexts. |
| restore() | Gibt den zuvor gespeicherten Pfadstatus und die Attribute zurück. |
Hinweis: getContext() und toDataURL() sind Methoden des <canvas>-Elements selbst und nicht des Zeichenkontexts.
Praxis
Was kann die Methode getContext('2d') im HTML5-Canvas tun?