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.

<form> Formular

CSS - Nur gefüllte Tabellenzellen hervorheben

PHP - Wochentage zählen und als Variabeln zurückgeben

JavaScript - Großbuchstaben Test

MySQL - Benutzer nach 1 Stunde zurücksetzen

Templates - HP Vorlagen
Templates sind fertige Homepage Vorlagen, die man nur noch mit Inhalt füllen muss. Das ist zwar für Anfänger eine schnelle Lösung, aber möchten Sie das gleiche Design wie auf anderen 97 Webseiten auch? Jede Homepage hat ihren eigenen Touch, eben der Stil, der die Seite einmalig macht.