Oznaka <canvas>

Oznaka <canvas> se uporablja za risanje grafike, sproti, prek skriptov. Je pregledna in je le vsebnik za grafiko, za dejansko risanje grafike moramo uporabiti skript. Vsako besedilo znotraj <canvas> elementa bo prikazano v brskalniku z onemogočenim JavaScript-om, ki ne podpirajo <canvas>.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>vmesnik za grafiko</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<canvas id="canvas1" width="300" height="200">Tvoj brskalnik ne podpira oznake canvas.</canvas>
<canvas id="canvas2" width="300" height="200">Tvoj brskalnik ne podpira oznake canvas.</canvas>

<script>
    // Canvas1: Risanje pravokotnikov
    const a = document.getElementById("canvas1");
    const b = a.getContext("2d");

    b.fillStyle = "greenyellow";
    b.fillRect(20, 20, 75, 50);

    // vključimo transparentnost
    b.globalAlpha = 0.2;

    b.fillStyle = "red";
    b.fillRect(50, 50, 75, 50);

    b.fillStyle = "orange";
    b.fillRect(80, 80, 75, 50);

    // Canvas2: Risanje krogov
    const c = document.getElementById("canvas2");
    const d = c.getContext("2d");

    // Prvi krog (modra barva)
    d.beginPath();
    d.arc(60, 60, 40, 0, 2 * Math.PI); // (x, y, radius, startAngle, endAngle)
    d.fillStyle = "blue";
    d.fill();
    d.closePath();

    // Drugi krog (rumena barva s transparentnostjo)
    d.globalAlpha = 0.6;
    d.beginPath();
    d.arc(120, 100, 50, 0, 2 * Math.PI);
    d.fillStyle = "yellow";
    d.fill();
    d.closePath();

    // Tretji krog (zelena barva)
    d.globalAlpha = 1; // vrnemo na polno vidljivost
    d.beginPath();
    d.arc(200, 80, 30, 0, 2 * Math.PI);
    d.fillStyle = "green";
    d.fill();
    d.closePath();
</script>
</body>
</html>

REZULTAT