HTML <canvas>-Element
Das <canvas>-Element ist eines der HTML5-Elemente. Es definiert einen Bereich auf der Webseite, in dem wir über Skripte (meist JavaScript) verschiedene Objekte, Bilder, Animationen und Fotocompositions erstellen können. Sie sollten ein Skript zum Zeichnen von Grafiken verwenden, da das <canvas>-Element lediglich ein Container für Grafiken ist.
Bei der Arbeit mit Canvas ist es wichtig, zwischen Konzepten wie dem Canvas-Element und dem Kontext eines Elements zu unterscheiden, die oft verwechselt werden. Dieses Element ist das, was in HTML eingebaut ist (der DOM-Knoten). Ein Canvas-Kontext ist ein Objekt mit seinen Eigenschaften und Methoden zum Rendern. Der Kontext kann 2D oder 3D sein. Das Canvas-Element kann nur einen Kontext haben.
Innerhalb des <canvas>-Elements muss ein alternativer Inhalt bereitgestellt werden, damit sowohl ältere Browser, die Canvas nicht unterstützen, als auch Browser mit deaktiviertem JavaScript diesen Inhalt anzeigen können.
Standardmäßig hat ein <canvas>-Element eine Größe von 300x150 Pixeln.
Sie können CSS verwenden, um die angezeigte Größe des Canvas zu ändern, aber es ist besser, die Abmessungen durch Festlegen der width- und height-Attribute im <canvas>-Element anzugeben, entweder direkt in HTML oder per JavaScript.
Syntax
Das <canvas>-Element wird in Paaren verwendet. Der Inhalt wird zwischen dem öffnenden (<canvas>) und dem schließenden (</canvas>)-Tag geschrieben.
Beispiel für das HTML <canvas>-Element:
Beispiel für das HTML Canvas-Element|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<canvas id="canvasExample">Your browser doesn’t support the HTML5 canvas element.</canvas>
<script>
var c=document.getElementById('canvasExample');
var ctx=c.getContext('2d');
ctx.fillStyle='#1c87c9';
ctx.fillRect(10,50,80,80);
</script>
</body>
</html>Ergebnis
Beispiel für das HTML <canvas>-Element zur Anzeige von Text:
HTML-Tag <canvas>|Canvas-Beispiel|W3Docs
<!DOCTYPE HTML>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<canvas id="canvasExample" width="400" height="200"></canvas>
<script>
var canvas = document.getElementById('canvasExample');
var context = canvas.getContext('2d');
context.font = '30pt Calibri';
context.fillStyle = '#1c87c9';
context.fillText('Canvas Example !', 50, 100);
</script>
</body>
</html>Beispiel für das HTML <canvas>-Element zum Zeichnen einer Linie:
Beispiel für das HTML <canvas>-Element zum Zeichnen einer Linie:
<!DOCTYPE html>
<html>
<body>
<canvas width="300" height="150" style="border:1px solid #cccccc;" id="canvasExample">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c = document.getElementById("canvasExample");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.strokeStyle='#1c87c9';
ctx.stroke();
</script>
</body>
</html>Attribute
| Attribute | Wert | Beschreibung |
|---|---|---|
height | Pixel | Definiert die Elementhöhe in Pixeln. |
width | Pixel | Definiert die Elementbreite in Pixeln. |
Das <canvas>-Element unterstützt Globale Attribute und Ereignisattribute.
Praxis
Welche Eigenschaften und Verwendungszwecke hat das HTML <canvas>-Element?