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 zur Erstellung von Grafiken mittels JavaScript und dem HTML <canvas>-Element. Sie kann unter anderem für Animationen, Spielgrafiken, Datenvisualisierungen, Fotomanipulation und Echtzeit-Videobearbeitung verwendet werden.
Die Canvas-API konzentriert sich hauptsächlich auf 2D-Grafiken. Die WebGL-API, die ebenfalls das <canvas>-Element nutzt, ermöglicht die Erstellung von hardwarebeschleunigten 2D- und 3D-Grafiken.
Barrierefreiheitsbedenken
Das <canvas>-Element ist lediglich eine Bitmap und liefert keine Informationen über die gezeichneten Objekte. Auf Canvas geschriebener Text kann zu Lesbarkeitsproblemen für Benutzer führen, die auf Bildschirmvergrößerung angewiesen sind. Die Pixel innerhalb eines Canvas-Elements skalieren nicht und können bei Vergrößerung verschwommen werden. Dies liegt daran, dass sie keine Vektoren sind, sondern buchstabenförmige Sammlungen von Pixeln. Beim Hineinzoomen werden die Pixel größer.
Der Canvas-Inhalt wird im Gegensatz zu semantischem HTML nicht an Barrierefreiheitswerkzeuge übermittelt. Generell sollten Sie Canvas wie Bilder verwenden und es vermeiden, bedeutenden Inhalt ohne zugängliches Hintergrund-Markup zu rendern.
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 zum HTML-<canvas>-Element. Anschließend bekommt die Methode HTMLCanvasElement.getContext() den Kontext dieses Elements—das Objekt, auf dem die Zeichnung gerendert wird.
Das eigentliche Zeichnen erfolgt mit der Schnittstelle CanvasRenderingContext2D. Die Eigenschaft fillStyle macht das Rechteck grün. Die Methode fillRect() platziert die obere linke Ecke bei (10, 10) und gibt ihr 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 sind unter WebGL referenziert.
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 Nutzung der Canvas-API als auch ihre fortgeschrittenen Funktionen abdeckt.
- HTML5 Canvas Deep Dive
-
Ein praxisnahes, buchlanges Einführung in die Canvas-API und WebGL.
- Canvas-Handbuch
-
Ein praktisches Nachschlagewerk für die Canvas-API.
- Manipulation von Videos mit Canvas
-
Kombination von
<video>und<canvas>zur Echtzeitbearbeitung von Videodaten.
Bibliotheken
Die Canvas-API ist extrem leistungsfähig, aber nicht immer einfach zu verwenden. Die unten aufgeführten Bibliotheken können die Erstellung von canvasbasierten Projekten schneller und einfacher machen.
- EaselJS ist eine Open-Source-Canvas-Bibliothek, die es einfach macht, Spiele, generative Kunst und andere stark grafische Erlebnisse zu erstellen.
- Fabric.js ist eine Open-Source-Canvas-Bibliothek mit SVG-Parsing-Funktionen.
- heatmap.js ist eine Open-Source-Bibliothek zur Erstellung von datenbasierten Heatmaps in 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 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-basierte Browser-Spiele.
- Pts.js ist eine Bibliothek für kreatives Programmieren und Visualisierung in Canvas und SVG.
- Rekapi ist eine Animations-Keyframing-API 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 kreatives Programmieren auf der Canvas — umfasst Barrierefreiheit und Hunderte von bunten Tutorials.
- Sprig ist eine einsteigerfreundliche, Open-Source, kachelbasierte Spieleentwicklungsbibliothek, die Canvas verwendet.
Hinweis: Sehen Sie sich die WebGL-API für 2D- und 3D-Bibliotheken an, die WebGL nutzen.
Spezifikationen
| Spezifikation |
|---|
| HTML # the-canvas-element |
