Canvas-Leitfaden
Dieser Leitfaden beschreibt, wie Sie das<canvas>-Element verwenden, um 2D-Grafiken zu zeichnen, beginnend mit den Grundlagen. Die bereitgestellten Beispiele sollen Ihnen einige klare Vorstellungen darüber geben, was Sie mit dem Canvas machen können, und bieten Code-Snippets, die Ihnen den Einstieg in die Erstellung eigener Inhalte erleichtern können.
<canvas> ist einHTML-Element, das zum Zeichnen von Grafiken über Skripting (normalerweiseJavaScript) verwendet werden kann. Dies kann beispielsweise verwendet werden, um Diagramme zu zeichnen, Fotos zu kombinieren oder einfache Animationen zu erstellen.
Erstmals im WebKit von Apple für das macOS-Dashboard eingeführt, wurde<canvas> mittlerweile in Browsern implementiert. Heute wird es von allen großen Browsern unterstützt.
Bevor Sie beginnen
Die Verwendung des<canvas>-Elements ist nicht sehr schwierig, aber Sie benötigen ein grundlegendes Verständnis vonHTML undJavaScript. Das<canvas>-Element wird in einigen älteren Browsern nicht unterstützt, jedoch in den aktuellen Versionen aller großen Browser. Die Standardgröße der Leinwand beträgt 300 Pixel × 150 Pixel (Breite × Höhe). Benutzerdefinierte Größen können jedoch mit den HTML-Eigenschaftenheight undwidth definiert werden. Um Grafiken auf die Leinwand zu zeichnen, verwenden wir ein JavaScript-Kontextobjekt, das Grafiken dynamisch erstellt.
In diesem Leitfaden
Siehe auch
Eine Mitteilung an die Mitwirkenden
Aufgrund eines unglücklichen technischen Fehlers, der in der Woche des 17. Juni 2013 auftrat, haben wir die Geschichte dieses Leitfadens verloren, einschließlich der Zuschreibungen an alle früheren Mitwirkenden zu dessen Inhalt. Wir entschuldigen uns dafür und hoffen, dass Sie diesen unglücklichen Vorfall verzeihen.
MDN-Feedback-Box
Diese Seite wurde automatisch aus dem Englischen übersetzt.