HTML - Element: <canvas>
Der <canvas>-Tag (HTML 5) dient zum Zeichnen von Grafiken, im laufenden Betrieb, über Skripte (in der Regel JavaScript). Der <canvas>-Tag ist nur ein Container für Grafiken, Sie müssen ein Skript verwenden, um tatsächlich die Grafiken zu zeichnen.
<!DOCTYPE html>
<html>
<head>
<title>Zeichnen einer Grafik</title>
</head>
<body>
<h1>Zeichnen einer Grafik</h1>
<canvas id="myCanvas"
style="width:200px; height:90px; border: solid 1px #000000;">
</canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// Ein blaues Rechteck zeichnen
ctx.fillStyle = 'rgb(0,191,255)'; // Farbe RGB
ctx.fillRect(10, 10, 100, 50); // Koordinaten
</script>
</body>
</html>
Attribute
Die Attribute: width="" und height="" geben die Breite und die Höhe an.
<canvas id="myCanvas" width="200" height="90"> </canvas>
Bausteine Alle Anzeigen
Eine zufällige Auswahl von Codeschnipseln
aus den Bereichen
HTML, CSS,
PHP, JavaScript und
MySQL.
<output> Ausgabe
CSS - Leuchtende blaue Eingabefelder
PHP - Datensätze in den Spalten einer Tabelle individuell ausgeben