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.

<em> Emphatischer Ausdruck

CSS - Parallax Scrolling-Effekt

PHP - Filtern von ganzen Zahlen

JavaScript - CSS über Javascript einbinden

MySQL - Anzahl der Datensätze in einer Spalte

Formulareingaben
Bei Formularen sollten Sie darauf achten, dass der Besucher so wenig Informationen über sich eingeben muss wie möglich. — Niemand möchte mehr Infos über sich hergeben als unbedingt nötig ist. Auch sollten Sie mit Pflichtangaben im Formular zurückhaltend sein.