Die HTML <canvas> Element wird verwendet , um Grafiken auf einer Webseite zu ziehen.
Die Grafik auf der linken Seite wird mit erstellt <canvas> . Es zeigt vier Elemente: ein rotes Rechteck, ein Gradient Rechteck, ein mehrfarbiges Rechteck, und ein Multicolor-Text.
Was ist HTML Canvas?
Die HTML <canvas> Element wird verwendet , um Grafiken zu zeichnen, on the fly, über Scripting (usually JavaScript) in der (usually JavaScript) .
Das <canvas> Element ist nur ein Container für Grafiken. Sie müssen ein Skript verwenden, um tatsächlich die Grafiken zu zeichnen.
Canvas verfügt über mehrere Methoden zum Zeichnen von Pfaden, Boxen, Kreise, Text und Hinzufügen von Bildern.
Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser - Version, die die voll unterstützt <canvas> Element.
| Element | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
HTML Canvas können Text Zeichnen
Canvas kann bunten Text, mit oder ohne Animation zeichnen.
HTML Canvas Kann Graphics Draw
Canvas hat tolle Features für die grafische Darstellung der Daten mit Bildern von Grafiken und Diagrammen.
HTML Canvas kann animiert werden
Canvas-Objekte bewegen kann. Alles ist möglich: von der einfachen, hüpfende Bälle komplexe Animationen.
HTML Canvas können interaktiv sein
Canvas kann auf JavaScript-Ereignisse reagieren.
Canvas kann zu jeder Benutzeraktion (Tastenklicks, Mausklicks, Tastenklicks, Fingerbewegung) reagieren.
HTML Canvas kann in Spielen verwendet werden
Canvas 'Methoden für Animationen, bieten eine Vielzahl von Möglichkeiten für die HTML-Gaming-Anwendungen.
Leinwand-Beispiel
In HTML, ein <canvas> sieht Element wie folgt aus :
<canvas id="myCanvas" width="200" height="100"></canvas>Das <canvas> -Element muss ein id - Attribut haben , so kann es durch JavaScript bezeichnet werden.
Die Breite und Höhe Attribut ist erforderlich, die Größe der Leinwand zu definieren.
Tip: Sie können mehrere haben <canvas> Elemente auf einer HTML - Seite.
Standardmäßig ist das <canvas> hat Element keine Grenze und keinen Inhalt.
Um einen Rahmen hinzuzufügen, verwenden Sie einen Stil-Attribut:
Beispiel
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid
#000000;">
</canvas>
Versuch es selber " In den folgenden Kapiteln zeigen, wie auf der Leinwand zu zeichnen.