Canvas-Tutorial
Dieses Tutorial beschreibt, wie man das <canvas>-Element verwendet, um 2D-Grafiken zu zeichnen, beginnend mit den Grundlagen. Die bereitgestellten Beispiele sollten Ihnen klare Vorstellungen darüber geben, was Sie mit Canvas machen können, und bieten Code-Snippets, die Ihnen den Einstieg in die Erstellung eigener Inhalte erleichtern können.
<canvas> ist ein HTML-Element, das zum Zeichnen von Grafiken über Skripting (in der Regel JavaScript) verwendet werden kann. Dies kann beispielsweise zum Zeichnen von Grafiken, Kombinieren von Fotos oder Erstellen einfacher Animationen genutzt werden.
Erstmals von Apple für das macOS Dashboard in WebKit 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, jedoch benötigen Sie ein grundlegendes Verständnis von HTML und JavaScript. Das <canvas>-Element wird in einigen älteren Browsern nicht unterstützt, jedoch in aktuellen Versionen aller großen Browser. Die Standardgröße des Canvas beträgt 300 Pixel × 150 Pixel (Breite × Höhe). Aber benutzerdefinierte Größen können über die HTML-Eigenschaften height und width definiert werden. Um Grafiken auf dem Canvas zu zeichnen, verwenden wir ein JavaScript-Kontextobjekt, das Grafiken in Echtzeit erstellt.
In diesem Tutorial
Siehe auch
Eine Anmerkung für Beitragsleistende
Aufgrund eines bedauerlichen technischen Fehlers, der in der Woche vom 17. Juni 2013 auftrat, haben wir die Geschichte dieses Tutorials, einschließlich der Zuschreibungen an alle bisherigen Mitwirkenden, verloren. Wir entschuldigen uns dafür und hoffen auf Ihr Verständnis für dieses unglückliche Missgeschick.