Dibujo simple en JavaScript utilizando el elemento canvas en HTML5 | Operating systems, scripting, PowerShell and security

Gráficos, JavaScript

<!DOCTYPE html>
<html>
<head>
    <title>Dibujo Simple en JavaScript</title>
</head>
<body>
    <canvas id="myCanvas" width="400" height="400"></canvas>

    <script>
        // Obtén el contexto del canvas
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");

        // Dibuja un círculo
        ctx.beginPath();
        ctx.arc(200, 200, 100, 0, 2 * Math.PI);
        ctx.fillStyle = "blue";
        ctx.fill();
        ctx.closePath();

        // Dibuja un rectángulo
        ctx.beginPath();
        ctx.rect(50, 50, 300, 200);
        ctx.fillStyle = "green";
        ctx.fill();
        ctx.closePath();

        // Dibuja una línea
        ctx.beginPath();
        ctx.moveTo(50, 50);
        ctx.lineTo(350, 250);
        ctx.strokeStyle = "red";
        ctx.lineWidth = 5;
        ctx.stroke();
        ctx.closePath();
    </script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Dibujo Simple en JavaScript</title>

</head>

<body>

// Obtén el contexto del canvas

var canvas = document.getElementById("myCanvas");

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

// Dibuja un círculo

ctx.beginPath();

ctx.arc(200, 200, 100, 0, 2 * Math.PI);

ctx.fillStyle = "blue";

ctx.fill();

ctx.closePath();

// Dibuja un rectángulo

ctx.beginPath();

ctx.rect(50, 50, 300, 200);

ctx.fillStyle = "green";

ctx.fill();

ctx.closePath();

// Dibuja una línea

ctx.beginPath();

ctx.moveTo(50, 50);

ctx.lineTo(350, 250);

ctx.strokeStyle = "red";

ctx.lineWidth = 5;

ctx.stroke();

ctx.closePath();

</script>

</body>

</html>

Publicado el día 16 de abril de 2023

CATEGORÍAS

Gráficos, JavaScript