Canvas-Einführung
Das HTML-Element <canvas> wird zum Zeichnen von Grafiken über Skripte verwendet. Es ist lediglich ein Container für Grafiken. Zum Zeichnen der Grafiken benötigen Sie JavaScript.
Canvas bietet mehrere Methoden zum Zeichnen von Pfaden, Kreisen, Rechtecken, Text sowie zum Einfügen von Bildern.
Canvas kann zum Zeichnen von farbigem Text verwendet werden, mit oder ohne Animation. Canvas-Objekte können ebenfalls animiert werden, d. h., sie können sich bewegen.
TIP
Auf einer HTML-Seite können mehrere <canvas>-Elemente platziert werden.
Canvas ist ein rechteckiger Bereich, der standardmäßig weder einen Rahmen noch Inhalte besitzt.
Canvas-Einführung
<canvas id="canvas" width="250" height="150"></canvas>DANGER
Verwenden Sie immer ein id-Attribut sowie width- und height-Attribute, um die Größe des Canvas zu definieren. Nutzen Sie das style-Attribut, um einen Rahmen hinzuzufügen.
Um auf den Canvas zu zeichnen, müssen Sie zunächst einen 2D-Zeichnungskontext mit canvas.getContext('2d') abrufen.
Beispiel für das HTML-Element <canvas>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<canvas id="canvas" width="250" height="150" style="border:1px solid #1c87c9;">
The HTML5 canvas tag is not supported by your browser.
</canvas>
</body>
</html>Beispiel für das HTML-Element <canvas> zum Zeichnen eines Kreises:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<canvas id="exampleCanvas" width="200" height="200" style="border:1px solid #dddddd;">
HTML5 canvas tag is not supported by your browser.
</canvas>
<script>
var c = document.getElementById("exampleCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 100, 60, 0, 2 * Math.PI);
ctx.strokeStyle = '#009299';
ctx.stroke();
</script>
</body>
</html>Beispiel für das HTML-Element <canvas> zum Zeichnen von Text:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<canvas id="exampleCanvas" width="350" height="110" style="border:1px solid #dddddd;">
HTML5 canvas tag is not supported by your browser.
</canvas>
<script>
var c = document.getElementById("exampleCanvas");
var ctx = c.getContext("2d");
ctx.font = "40px Arial";
ctx.fillStyle = '#262ac7';
ctx.fillText("Canvas Text", 55, 65);
</script>
</body>
</html>Beispiel für das HTML-Element <canvas> zum Zeichnen eines linearen Farbverlaufs:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<canvas id="exampleCanvas" width="300" height="140" style="border:1px solid #dddddd;">
The HTML5 canvas tag is not supported by your browser.
</canvas>
<script>
var c = document.getElementById("exampleCanvas");
var ctx = c.getContext("2d");
var grd = ctx.createLinearGradient(0, 0, 300, 0);
grd.addColorStop(0, "#359900");
grd.addColorStop(1, "#ffffff");
ctx.fillStyle = grd;
ctx.fillRect(20, 20, 250, 100);
</script>
</body>
</html>Beispiel für das HTML-Element <canvas> zum Zeichnen einer Linie:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<canvas id="exampleCanvas" width="150" height="150" style="border:1px solid #cccccc;">
The HTML5 canvas tag is not supported by your browser.
</canvas>
<script>
var c = document.getElementById("exampleCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(150, 150);
ctx.strokeStyle = '#86417d';
ctx.stroke();
</script>
</body>
</html>Beispiel für das HTML-Element <canvas> zum Zeichnen eines Bildes:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<div>
<h2>Original image</h2>
<img id="flower" src="https://images.unsplash.com/photo-1485431142439-206ba3a9383e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" width="500" height="379" />
</div>
<h2>Draw an image with canvas</h2>
<canvas id="exampleCanvas"></canvas>
<script>
const canvas = document.getElementById('exampleCanvas');
const ctx = canvas.getContext('2d');
const image = document.getElementById('flower');
image.addEventListener('load', e => {
ctx.drawImage(image, 80, 80, 350, 200, 10, 10, 150, 100);
});
</script>
</body>
</html>Beispiel für das HTML-Element <canvas> zum Zeichnen eines radialen Farbverlaufs:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<canvas id="exampleCanvas" width="260" height="160" style="border:1px solid #cdcdcd;">
The HTML5 canvas tag is not supported by your browser.
</canvas>
<script>
var c = document.getElementById("exampleCanvas");
var ctx = c.getContext("2d");
var grd = ctx.createRadialGradient(150, 75, 10, 115, 90, 150);
grd.addColorStop(0, "purple");
grd.addColorStop(1, "white");
ctx.fillStyle = grd;
ctx.fillRect(20, 20, 220, 120);
</script>
</body>
</html>Practice
Welche Eigenschaften und Verwendungszwecke hat das HTML Canvas?