tas2580
Blog über Webentwicklung

HTML - <canvas>

Wird verwendet um Grafiken, über Scripting (in der Regel JavaScript), "on the fly" zu zeichnen.

Beispiel

<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>

Demo


Definition und Verwendung

Der <canvas> -Tag wird verwendet um Grafiken " on the fly" zu zeichnen, über Scripting (in der Regel JavaScript)

Der <canvas> -Tag ist nur ein Container, für Grafiken müss ein Skript verwendet werden, um tatsächlich die Grafiken zu zeichnen.


Browser Unterstützung

Chrome 4.0
Firefox 2.0
Safari 3.1
Opera 9.0
Edge 12.0
IE 9.0

Attribute

Attribute stellen zusätzliche Informationen über HTML-Elemente bereit. Attribute müssen immer in den öffnenden Tag geschrieben werden.

Attribut Wert Beschreibung
height Pixel / Prozent Gibt die Höhe der canvas an
width Pixel / Prozent Gibt die Breite der canvas an

Der <canvas> Tag verwendet Globale HTML Attribute.