Canvas API
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Die Canvas API bietet eine Möglichkeit zum Zeichnen von Grafiken über JavaScript und das HTML <canvas>-Element. Sie kann unter anderem für Animationen, Spiele-Grafiken, Datenvisualisierung, Fotomanipulation und Echtzeit-Videoverarbeitung verwendet werden.
Die Canvas API konzentriert sich größtenteils auf 2D-Grafiken. Die WebGL API, die ebenfalls das <canvas>-Element verwendet, zeichnet hardwarebeschleunigte 2D- und 3D-Grafiken.
Einfaches Beispiel
Dieses einfache Beispiel zeichnet ein grünes Rechteck auf ein Canvas.
HTML
<canvas id="canvas"></canvas>
JavaScript
Die Methode Document.getElementById() holt eine Referenz auf das HTML-<canvas>-Element. Als nächstes holt die Methode HTMLCanvasElement.getContext() den Kontext dieses Elements—die Fläche, auf die die Zeichnung gerendert wird.
Das eigentliche Zeichnen erfolgt über das Interface CanvasRenderingContext2D. Die Eigenschaft fillStyle färbt das Rechteck grün. Die Methode fillRect() platziert die obere linke Ecke bei (10, 10) und gibt ihm eine Größe von 150 Einheiten Breite und 100 Höhe.
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(10, 10, 150, 100);
Ergebnis
Referenz
HTMLCanvasElementCanvasRenderingContext2DCanvasGradientCanvasPatternImageBitmapImageDataTextMetricsOffscreenCanvasPath2DExperimentellImageBitmapRenderingContextExperimentell
Hinweis:
Die Schnittstellen, die sich auf den WebGLRenderingContext beziehen, sind unter WebGL zu finden.
Hinweis:
OffscreenCanvas ist auch in Web-Workern 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 abdeckt.
- HTML5 Canvas Deep Dive
-
Eine praktische, buchlange Einführung in die Canvas API und WebGL.
- Canvas-Handbuch
-
Eine nützliche Referenz für die Canvas API.
- Video mit Canvas manipulieren
-
Kombination von
<video>und<canvas>, um Videodaten in Echtzeit zu manipulieren.
Bibliotheken
Die Canvas API ist äußerst leistungsfähig, aber nicht immer einfach zu verwenden. Die unten aufgelisteten 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 grafisch anspruchsvollen Erfahrungen einfach macht.
- Fabric.js ist eine Open-Source-Canvas-Bibliothek mit SVG-Parsing-Fähigkeiten.
- heatmap.js ist eine Open-Source-Bibliothek zur Erstellung von canvas-basierten 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, Pädagogen und Anfänger.
- Phaser ist ein schnelles, kostenloses und unterhaltsames Open-Source-Framework für Canvas- und WebGL-gestützte Browserspiele.
- Pts.js ist eine Bibliothek für kreatives Codieren und Visualisierung in Canvas und SVG.
- Rekapi ist eine API zur Animations-Keyframing für Canvas.
- Scrawl-canvas ist eine Open-Source-JavaScript-Bibliothek zur Erstellung und Manipulation von 2D-Canvas-Elementen.
- Das ZIM-Framework bietet Annehmlichkeiten, Komponenten und Steuerungen für das kreativitätsfördernde Codieren auf dem Canvas — beinhaltet Barrierefreiheit und Hunderte von bunten Tutorials.
- Sprig ist eine anfängerfreundliche, Open-Source, tile-basierte Spieleentwicklungsbibliothek, die Canvas verwendet.
Hinweis: Siehe die WebGL API für 2D- und 3D-Bibliotheken, die WebGL verwenden.
Spezifikationen
| Specification |
|---|
| HTML # the-canvas-element |