HTML-Canvas-Tutorials

Das HTML <canvas>-Element wird verwendet, um Grafiken auf Webseiten zu zeichnen.

Die obige Grafik wurde mit <canvas> erstellt.

Es zeigt vier Elemente an: roter Rechteck, Gradientenrechteck, mehrfarbiges Rechteck und mehrfarbiger Text.

Was ist HTML Canvas?

Das HTML <canvas>-Element wird verwendet, um durch Skripte (meistens JavaScript) dynamisch Grafiken zu zeichnen.

Das <canvas>-Element ist nur ein Behälter für Grafiken. Sie müssen Skripte verwenden, um tatsächliche Grafiken zu zeichnen.

Canvas verfügt über verschiedene Methoden zum Zeichnen von Pfaden, Rechtecken, Kreisen, Text und zum Hinzufügen von Bildern.

HTML Canvas kann Text zeichnen

Canvas kann farbigen Text zeichnen und auch animierte Effekte hinzufügen.

HTML Canvas kann Grafiken zeichnen

Canvas verfügt über leistungsstarke Fähigkeiten zur graphischen Darstellung von Daten mit Grafiken und Diagrammen.

HTML Canvas kann animiert werden

Canvas-Objekte können bewegt werden. Alles ist möglich: von einfachen Sprungbällen bis hin zu komplexen Animationen.

HTML Canvas ist interaktiv

Canvas kann auf JavaScript-Ereignisse reagieren.

Canvas kann auf jede Benutzeraktion reagieren (Klick, Mausklick, Buttonklick, Fingermovement).

HTML Canvas kann für Spiele verwendet werden

Die Animationsmethoden von Canvas bieten viele Möglichkeiten für HTML-Spielanwendungen.

Canvas-Beispiel

In HTML sieht das <canvas>-Element so aus:

<canvas id="myCanvas" width="200" height="100"></canvas>

Das <canvas>-Element muss eine id-Attribut haben, damit JavaScript darauf verweisen kann.

Die width- und height-Attribute sind ebenfalls erforderlich, um die Größe des Canvas zu definieren.

Hinweis: Eine HTML-Seite kann mehrere <canvas>-Elemente enthalten.

Standardmäßig hat das <canvas>-Element keinen Rahmen und keinen Inhalt.

Um einen Rahmen hinzuzufügen, verwenden Sie das style-Attribut:

Beispiel

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

Versuchen Sie es selbst

Die folgenden Kapitel beschreiben, wie man auf dem Canvas zeichnet.

Weitere Informationen siehe:

Vollständiges Canvas-Referenzhandbuch von CodeW3C.com

Browser-Unterstützung

<canvas>-Element ist Bestandteil des HTML5-Standards (2014).

Alle modernen Browser unterstützen <canvas>: