HTML-Canvas: Text, Linie, Text ausgeben

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>

Bespiel online anschauen und testen

Das gesamte Beispiel gibt es hier zum Testen

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht.