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, Spielgrafiken, Datenvisualisierung, Fotomanipulation und Echtzeit-Videoverarbeitung verwendet werden.
Die Canvas-API konzentriert sich hauptsächlich 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 eine Leinwand.
HTML
<canvas id="canvas"></canvas>
JavaScript
Die Methode Document.getElementById() erhält eine Referenz auf das HTML-<canvas>-Element. Anschließend erhält die Methode HTMLCanvasElement.getContext() den Kontext des Elements, auf dem die Zeichnung gerendert wird.
Die eigentliche Zeichnung erfolgt mit der Schnittstelle 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 im Zusammenhang mit dem WebGLRenderingContext sind unter WebGL aufgeführt.
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 Nutzung der Canvas-API als auch deren fortgeschrittene Funktionen abdeckt.
- HTML5 Canvas Deep Dive
-
Eine praktische, buchlange Einführung in die Canvas-API und WebGL.
- Canvas-Handbuch
-
Ein nützliches Nachschlagewerk 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 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 grafisch anspruchsvollen Erlebnissen erleichtert.
- Fabric.js ist eine Open-Source-Canvas-Bibliothek mit SVG-Parsing-Fähigkeiten.
- heatmap.js ist eine Open-Source-Bibliothek zur Erstellung datenbasierter Wärmebilder auf Canvas.
- 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.
- Paper.js ist ein Open-Source-Vektorgrafik-Scripting-Framework, das auf der HTML-Canvas läuft.
- Phaser ist ein schnelles, kostenloses und unterhaltsames Open-Source-Framework für Canvas- und WebGL-basierte Browser-Spiele.
- Pts.js ist eine Bibliothek für kreatives Codieren und Visualisierung in Canvas und SVG.
- Rekapi ist eine Animations-Key-Framing-API für Canvas.
- Scrawl-canvas ist eine Open-Source-JavaScript-Bibliothek zum Erstellen und Manipulieren von 2D-Canvas-Elementen.
- Das ZIM Framework bietet Annehmlichkeiten, Komponenten und Steuerelemente für kreative Codierung auf Canvas — einschließlich Zugänglichkeit und hunderten von bunten Tutorials.
- Sprig ist eine anfängerfreundliche, Open-Source, kachelbasierte Spielentwicklungsbibliothek, die Canvas verwendet.
Hinweis: Sehen Sie sich die WebGL-API für 2D- und 3D-Bibliotheken an, die WebGL verwenden.
Spezifikationen
| Specification |
|---|
| HTML # the-canvas-element |