Kleine Beispiele für den Umgang mit dem HTML-Canvas Element.
Zeichen mit dem Canvas-Element. Einige Beispiele.
Linie zeichnen
Im ersten Beispiel zeichen wir eine einfache Linie.
<canvas id="canvasLine" width="250" height="150" style="border: 1px solid #cccccc"></canvas>
<script>
{
var c = document.getElementById("canvasLine");
let ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(250, 150);
ctx.stroke();
}
</script>
Kreis zeichnen
Nun ein Kreis, wir können hier auch die Farbe setzen und die Linienstärke.
<canvas id="canvasCircle" width="250" height="150" style="border: 1px solid #cccccc"></canvas>
<script>
{
var c = document.getElementById("canvasCircle");
let ctx = c.getContext("2d");
ctx.strokeStyle = "#FF0000";
ctx.lineWidth = 5;
ctx.beginPath();
ctx.arc(100, 75, 40, 0, 2 * Math.PI);
ctx.stroke();
}
</script>
Text ausgeben
Auch Text lässt sich ausgeben, auch hier können wir die Farbe setzen. Die Schriftart muss auf dem jeweiligen Computer vorhanden sein, damit die Anzeige funktioniert.
<script>
{
var c = document.getElementById("canvasText");
var ctx = c.getContext("2d");
ctx.fillStyle = "#00FF00";
ctx.font = "30px Comic Sans MS";
ctx.fontColor = "#FF0000";
ctx.fillText("Hello World", 50, 50);
}
</script>
