Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

El código de la clase funcionando aquí:

El código de la clase funcionando aquí: https://ingluisnavas.github.io/alura/circulo.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejercicio circulon</title>
</head>

<body>
    <canvas width="600" height="400"></canvas>


    <script>
        var pantalla = document.querySelector("canvas");
        var pincel = pantalla.getContext("2d");

        pincel.fillStyle = "grey";
        pincel.fillRect(0, 0, 600, 400);


        function exibirAlerta(evento) {

            var x = evento.pageX - pantalla.offsetLeft;
            var y = evento.pageY - pantalla.offsetTop;

            console.log(evento);
            alert(x + " , " + y);
        }

        function dibujarCirculo(evento) {

            var x = evento.pageX - pantalla.offsetLeft;
            var y = evento.pageY - pantalla.offsetTop;

            pincel.fillStyle = "blue";
            pincel.beginPath();
            pincel.arc(x, y, 10, 0, 2 * 3.14);
            pincel.fill();

            console.log(evento);
        }
        //pantalla.onclick = exibirAlerta;
        pantalla.onclick = dibujarCirculo;
    </script>


</body>


</html>
1 respuesta

Hola Luis , espero que esté bien.

Gracias por compartir tu código con nosotros, he probado aquí y el resultado ha sido muy bueno.

Si tienes alguna pregunta sobre el contenido de los cursos, estaremos aquí para ayudarte.

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios