Canvas-Element in HTML

Das canvas-Element in HTML wird verwendet für Grafiken zum Beispiel von JavaScript. Das <canvas>-Element in HTML ist nur ein Container für Grafiken. In Canvas können Rechtecke, Kreise, Texte und Bilder eingefügt werden. Canvas ist ein rechteckiges Areal auf einer Webseite und verwendet keinen Rahmen und auch keinen Inhalt (bei Vorlage).

Der Syntax sieht wie folgt aus:

<canvas id="myCanvas" width="200" height="100"></canvas>

Bemerke: Immer ein <id> Attribut verwenden (in Bezug zu einem Skript). Das <width> und <height> Attribut definiert die Grösse des Canvas. Zum hinzufügen eines Rahmen benutze das <style> Attribut.

<!DOCTYPE html>

<html>

<head>

</head>

<body>

Dein Browser unterstützt die HTML 5 Tag nicht.</canvas>

var d = document.getElementById("myCanvasTextHTML5");

var ctx = d.getContext("2d");

var grd = ctx.createLinearGradient(0, 0, 200, 0);

grd.addColorStop(0, "white");

grd.addColorStop(1, "dodgerblue");

ctx.fillStyle = grd;

ctx.fillRect(0, 0, 200, 100);

var c = document.getElementById("myCanvasTextHTML5");

var ctx = c.getContext("2d");

ctx.font = "30px Arial";

ctx.strokeText("HTML 5", 40, 60);

</script><br>

Dein Browser unterstützt die HTML 5 Tag nicht.</canvas>

var d = document.getElementById("myCanvasTextCSS3");

var ctx = d.getContext("2d");

var grd = ctx.createLinearGradient(0, 0, 200, 0);

grd.addColorStop(0, "dodgerblue");

grd.addColorStop(1, "grey");

ctx.fillStyle = grd;

ctx.fillRect(0, 0, 200, 100);

var c = document.getElementById("myCanvasTextCSS3");

var ctx = c.getContext("2d");

ctx.font = "30px Arial";

ctx.strokeText("CSS 3", 50, 60);

</script>

</body>

</html>