Beispiel
Zeichnen Sie ein rotes Quadrat, auf der Fliege, und zeigen Sie es im Inneren des <canvas> Element:
<canvas id="myCanvas"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>
Versuch es selber " Definition und Verwendung
Das <canvas> -Tag wird verwendet , um Grafiken zu zeichnen, on the fly, über Scripting ( in der Regel JavaScript).
Das <canvas> -Tag ist nur ein Container für Grafiken, müssen Sie ein Skript verwenden , um tatsächlich die Grafiken zu zeichnen.
Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die das Element vollständig unterstützt.
| Element | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
Unterschiede zwischen HTML 4.01 und HTML5
Das <canvas> -Tag ist neu in HTML5.
Tipps und Hinweise
Hinweis: Jeder Text innerhalb des <canvas> Element wird in Browsern angezeigt werden , die nicht unterstützt <canvas> .
Tipp: Erfahren Sie mehr über das <canvas> Element in unserem HTML - Canvas - Tutorial .
Tipp: Für eine komplette Referenz aller Eigenschaften und Methoden , die mit der Leinwand Objekt verwendet werden kann, gehen Sie auf unsere HTML Canvas Referenz .
Attribute
= Neu in HTML5.
| Attribut | Wert | Beschreibung |
|---|---|---|
| height | pixels | Gibt die Höhe der Leinwand |
| width | pixels | Gibt die Breite der Leinwand |
globale Attribute
Das <canvas> -Tag unterstützt auch den Global in HTML - Attribute .
Event-Attribute
Das <canvas> -Tag unterstützt auch die Veranstaltung in HTML - Attribute .
Standard CSS-Einstellungen
Keiner.