Canvas-Leitfaden
Dieser Leitfaden beschreibt, wie Sie das <canvas>-Element verwenden, um 2D-Grafiken zu zeichnen, beginnend mit den Grundlagen. Die bereitgestellten Beispiele sollten Ihnen einige klare Ideen darüber geben, was Sie mit Canvas tun können, und sie werden Codeausschnitte bereitstellen, die Ihnen den Einstieg in die Erstellung eigener Inhalte erleichtern könnten.
Das <canvas> ist ein HTML-Element, das verwendet werden kann, um Grafiken mittels Skripting zu zeichnen (in der Regel JavaScript). Dies kann zum Beispiel genutzt werden, um Diagramme zu zeichnen, Fotos zu kombinieren oder einfache Animationen zu erstellen.
Erstmals von Apple für das macOS Dashboard in WebKit eingeführt, wurde <canvas> seitdem 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 von HTML und JavaScript. Das <canvas>-Element wird von einigen älteren Browsern nicht unterstützt, aber es wird in den aktuellen Versionen aller großen Browser unterstützt. Die Standardgröße der Leinwand beträgt 300 Pixel × 150 Pixel (Breite × Höhe). Aber benutzerdefinierte Größen können mit den HTML-Eigenschaften height und width definiert werden. Um Grafiken auf der Leinwand zu zeichnen, verwenden wir ein JavaScript-Kontextobjekt, das Grafiken spontan erstellt.