HTML-Canvas -Tutorial
Das HTML-Element <canvas> wird verwendet, um Grafiken auf einer Webseite zu zeichnen.
Die obige Grafik wird mit <canvas> erstellt.
Es zeigt vier Elemente: ein rotes Rechteck, ein Verlaufsrechteck, ein mehrfarbiges Rechteck und einen mehrfarbigen Text.
Was ist HTML-Canvas?
Das HTML-Element <canvas> wird verwendet, um Grafiken im Handumdrehen über Skripte (normalerweise JavaScript) zu zeichnen.
Das <canvas>-Element ist nur ein Container für Grafiken. Sie müssen ein Skript verwenden, um die Grafiken tatsächlich zu zeichnen.
Canvas verfügt über mehrere Methoden zum Zeichnen von Pfaden, Kästchen, Kreisen, Text und zum Hinzufügen von Bildern.
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die das Element <canvas> vollständig unterstützt.
| Element | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
HTML Canvas kann Text zeichnen
Canvas kann farbigen Text zeichnen, mit oder ohne Animation.
HTML Canvas kann Grafiken zeichnen
Canvas verfügt über großartige Funktionen für die grafische Datenpräsentation mit einer Bildsprache aus Grafiken und Diagrammen.
HTML-Leinwand kann animiert werden
Canvas-Objekte können sich bewegen. Alles ist möglich: von einfachen hüpfenden Bällen bis hin zu komplexen Animationen.
HTML Canvas kann interaktiv sein
Canvas kann auf JavaScript-Ereignisse reagieren.
Canvas kann auf jede Benutzeraktion reagieren (Tastenklicks, Mausklicks, Schaltflächenklicks, Fingerbewegungen).
HTML Canvas kann in Spielen verwendet werden
Die Methoden von Canvas für Animationen bieten viele Möglichkeiten für HTML-Gaming-Anwendungen.
Canvas-Beispiel
In HTML sieht ein <canvas>-Element so aus:
<canvas id="myCanvas" width="200" height="100"></canvas>
Das <canvas>-Element muss ein id-Attribut haben, damit JavaScript darauf verweisen kann.
Das width- und height-Attribut ist notwendig, um die Größe der Leinwand zu definieren.
Tipp: Sie können mehrere <canvas>-Elemente auf einer HTML-Seite haben.
Standardmäßig hat das <canvas>-Element keinen Rand und keinen Inhalt.
Verwenden Sie zum Hinzufügen eines Rahmens ein Stilattribut:
Beispiel
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid
#000000;"></canvas>
Die nächsten Kapitel zeigen, wie man auf der Leinwand zeichnet.