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, Grafiken über JavaScript und das HTML <canvas>-Element zu zeichnen. Unter anderem kann sie für Animationen, Spielgrafiken, Datenvisualisierung, Fotomanipulation und Echtzeit-Videobearbeitung 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 eine Leinwand.
HTML
<canvas id="canvas"></canvas>
JavaScript
Die Methode Document.getElementById() erhält eine Referenz auf das HTML-<canvas>-Element. Anschließend ruft die Methode HTMLCanvasElement.getContext() den Kontext dieses Elements ab – das, worauf die Zeichnung gerendert wird.
Die eigentliche Zeichnung erfolgt über die Schnittstelle CanvasRenderingContext2D. Die Eigenschaft fillStyle macht 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 mit WebGLRenderingContext zusammenhängen, werden unter WebGL referenziert.
Hinweis: OffscreenCanvas ist auch in Webworkern verfügbar.
CanvasCaptureMediaStreamTrack ist eine verwandte Schnittstelle.
Leitfäden und Anleitungen
- Canvas-Anleitung
-
Ein umfassender Leitfaden, der sowohl die grundlegende Nutzung 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
-
Ein praktisches Nachschlagewerk für die Canvas API.
- Manipulation von Video mit Canvas
-
Kombination von
<video>und<canvas>, um Videodaten in Echtzeit zu manipulieren.
Bibliotheken
Die Canvas API ist extrem 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 einfach macht.
- Fabric.js ist eine Open-Source-Canvas-Bibliothek mit SVG-Parsing-Funktionalitäten.
- 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.
- Paper.js ist ein Open-Source-Vektorgrafik-Scripting-Framework, das auf dem 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 kreative Codierung und Visualisierung in Canvas und SVG.
- Rekapi ist eine API zur Animation-Key-Framing 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 zur kreativen Programmierung auf der Leinwand – einschließlich Zugänglichkeit und hunderten von bunten Tutorials.
- Sprig ist eine anfängerfreundliche, open-source, kachelbasierte Spieleentwicklungsbibliothek, 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 |