Baseline Widely available
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.
Dieses einfache Beispiel zeichnet ein grünes Rechteck auf ein Canvas.
HTML<canvas id="canvas"></canvas>
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);
HTMLCanvasElementCanvasRenderingContext2DCanvasGradientCanvasPatternImageBitmapImageDataTextMetricsOffscreenCanvasPath2D ExperimentellImageBitmapRenderingContext ExperimentellHinweis: 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.
Ein umfassendes Tutorial, das sowohl die grundlegende Verwendung der Canvas-API als auch ihre erweiterten Funktionen abdeckt.
Eine praktische, buchlange Einführung in die Canvas API und WebGL.
Eine nützliche Referenz für die Canvas API.
Kombination von <video> und <canvas>, um Videodaten in Echtzeit zu manipulieren.
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.
Hinweis: Siehe die WebGL API für 2D- und 3D-Bibliotheken, die WebGL verwenden.
Spezifikationen Browser-Kompatibilität Siehe auchRetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4