Canvas tutorial
Dieses Tutorial beschreibt, wie das <canvas>-Element verwendet wird, um 2D-Grafiken zu zeichnen, beginnend mit den Grundlagen. Die bereitgestellten Beispiele sollen Ihnen klare Vorstellungen darüber geben, was Sie mit Canvas machen können, und bieten Codebeispiele, die Ihnen den Einstieg in die Erstellung eigener Inhalte erleichtern können.
<canvas> ist ein HTML-Element, das über Skripte (normalerweise JavaScript) zum Zeichnen von Grafiken verwendet werden kann. Dies kann beispielsweise genutzt werden, um Diagramme zu zeichnen, Fotos zu kombinieren oder einfache Animationen zu erstellen.
Zuerst von Apple in WebKit für das macOS Dashboard eingeführt, wurde <canvas> inzwischen in Browsern implementiert. Heute unterstützen alle gängigen Browser dieses Element.
Bevor Sie beginnen
Die Verwendung des <canvas>-Elements ist nicht sehr schwierig, erfordert jedoch ein grundlegendes Verständnis von HTML und JavaScript. Das <canvas>-Element wird in einigen älteren Browsern nicht unterstützt, jedoch in den aktuellen Versionen aller gängigen Browser. Die Standardgröße des Canvas beträgt 300 Pixel × 150 Pixel (Breite × Höhe). Benutzerdefinierte Größen können jedoch mit den HTML-Eigenschaften height und width definiert werden. Um Grafiken auf dem Canvas zu zeichnen, verwenden wir ein JavaScript-Kontextobjekt, das Grafiken dynamisch erstellt.
In diesem Tutorial
Siehe auch
Ein Hinweis an die Mitwirkenden
Aufgrund eines bedauerlichen technischen Fehlers in der Woche des 17. Juni 2013 haben wir die Historie dieses Tutorials verloren, einschließlich der Zuschreibungen an alle früheren Mitwirkenden an seinem Inhalt. Wir entschuldigen uns dafür und hoffen, dass Sie diesen unglücklichen Vorfall entschuldigen können.