Canvas API
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Die Canvas API bietet eine Möglichkeit, Grafiken über JavaScript und das HTML-Element <canvas> zu zeichnen. Unter anderem kann sie für Animationen, Spielgrafiken, Datenvisualisierung, Bildbearbeitung und Videobearbeitung in Echtzeit verwendet werden.
Die Canvas API konzentriert sich weitgehend auf 2D-Grafiken. Die WebGL API, die ebenfalls das <canvas>-Element verwendet, zeichnet hardwarebeschleunigte 2D- und 3D-Grafiken.
Bedenken hinsichtlich der Barrierefreiheit
Das <canvas>-Element ist lediglich eine Bitmap und liefert keine Informationen über gezeichnete Objekte. Auf einem Canvas geschriebener Text kann für Benutzer, die auf Bildschirmvergrößerung angewiesen sind, zu Problemen mit der Lesbarkeit führen. Die Pixel innerhalb eines Canvas-Elements werden nicht skaliert und können bei Vergrößerung unscharf werden. Das liegt daran, dass sie keine Vektoren, sondern buchstabenförmige Ansammlungen von Pixeln sind. Beim Hineinzoomen werden die Pixel größer.
Canvas-Inhalte werden nicht wie semantisches HTML für Hilfstechnologien verfügbar gemacht. Im Allgemeinen sollten Sie Canvases wie Bilder verwenden und vermeiden, sie zum Rendern bedeutender Inhalte ohne zugängliches unterstützendes Markup einzusetzen.
Grundlegendes Beispiel
Dieses einfache Beispiel zeichnet ein grünes Rechteck auf ein Canvas.
HTML
<canvas id="canvas"></canvas>
JavaScript
Die Methode Document.getElementById() ruft eine Referenz auf das HTML-Element <canvas> ab. Anschließend ruft die Methode HTMLCanvasElement.getContext() den Kontext dieses Elements ab – das Objekt, auf dem die Zeichnung gerendert wird.
Das eigentliche Zeichnen erfolgt über die Schnittstelle CanvasRenderingContext2D. Die Eigenschaft fillStyle färbt das Rechteck grün. Die Methode fillRect() platziert dessen linke obere Ecke bei (10, 10) und gibt ihm eine Größe von 150 Einheiten Breite und 100 Einheiten Höhe.
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(10, 10, 150, 100);
Ergebnis
Referenz
HTMLCanvasElementCanvasRenderingContext2DCanvasGradientCanvasPatternImageBitmapImageDataTextMetricsOffscreenCanvasPath2DImageBitmapRenderingContext
Hinweis:
Die Schnittstellen im Zusammenhang mit WebGLRenderingContext werden unter WebGL behandelt.
Hinweis:
OffscreenCanvas ist auch in Web Workers verfügbar.
CanvasCaptureMediaStreamTrack ist eine verwandte Schnittstelle.
Leitfäden und Tutorials
- Canvas-Tutorial
-
Ein umfassendes Tutorial, das sowohl die grundlegende Verwendung der Canvas API als auch ihre erweiterten Funktionen behandelt.
- HTML5 Canvas Deep Dive
-
Eine praxisnahe, buchlange Einführung in die Canvas API und WebGL.
- Canvas Handbook
-
Eine praktische Referenz für die Canvas API.
- Videodaten mit Canvas bearbeiten
-
Kombination von
<video>und<canvas>, um Videodaten in Echtzeit zu bearbeiten.
Bibliotheken
Die Canvas API ist äußerst leistungsfähig, aber nicht immer einfach zu verwenden. Die unten aufgeführten Bibliotheken können die Erstellung von Canvas-basierten Projekten schneller und einfacher machen.
- EaselJS ist eine Open-Source-Canvas-Bibliothek, die das Erstellen von Spielen, generativer Kunst und anderen stark grafischen Erlebnissen vereinfacht.
- Fabric.js ist eine Open-Source-Canvas-Bibliothek mit SVG-Parsing-Funktionen.
- heatmap.js ist eine Open-Source-Bibliothek zum Erstellen Canvas-basierter Daten-Heatmaps.
- JavaScript InfoVis Toolkit erstellt interaktive Datenvisualisierungen.
- Konva.js ist eine 2D-Canvas-Bibliothek für Desktop- und mobile Anwendungen.
- p5.js bietet einen vollständigen Satz von Canvas-Zeichenfunktionen für Künstler, Designer, Lehrkräfte und Einsteiger.
- Phaser ist ein schnelles, kostenloses und unterhaltsames Open-Source-Framework für Canvas- und WebGL-gestützte Browser-Spiele.
- Pts.js ist eine Bibliothek für kreatives Programmieren und Visualisierung in Canvas und SVG.
- Rekapi ist eine API für Animations-Keyframing für Canvas.
- Scrawl-canvas ist eine Open-Source-JavaScript-Bibliothek zum Erstellen und Bearbeiten von 2D-Canvas-Elementen.
- Das ZIM-Framework bietet Hilfsmittel, Komponenten und Steuerelemente für kreatives Programmieren auf dem Canvas – einschließlich Barrierefreiheit und Hunderten farbenfroher Tutorials.
- Sprig ist eine einsteigerfreundliche, Open-Source-, kachelbasierte Bibliothek zur Spieleentwicklung, die Canvas verwendet.
Hinweis: Informationen zu 2D- und 3D-Bibliotheken, die WebGL verwenden, finden Sie in der WebGL API.
Spezifikationen
| Spezifikation |
|---|
| HTML # the-canvas-element |