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>

Beispiel anzeigen

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.

<footer> Fußbereich

CSS - Sternebewertung

PHP - Bild und Bildinformation anzeigen

JavaScript - Iframe alle 10 Sekunden neu laden

MySQL - Spalten aktualisieren

Lernen beim Arbeiten
Viele Fehler werden beim Arbeiten an der Homepage erkannt und im weiteren Verlauf vermieden (Etwas daraus gelernt!). Auch das Lernen durch Ausprobieren, zum Beispiel einen bestimmten Wert einfach erhöhen und sehen was dann passiert ist sehr lehrreich.