1
respuesta

Haz lo que hicimos en el aula

<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 excibirAlerta(evento){
    var x = evento.pageX - pantalla.offsetLeft;
    var y = evento.pageY - pantalla.offsetTop;
    console.log(evento);
    alert("diste un clic en     " +  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(x + " , " + y );


}




//pantalla.onclick = excibirAlerta;
pantalla.onclick    = dibujarCirculo;

</script>
1 respuesta

¡Hola Irvin!

Por lo que veo, este código utiliza la etiqueta canvas de HTML5 para dibujar un círculo azul en la posición donde se hace clic en la pantalla. Además, también muestra las coordenadas donde se hizo clic en una alerta.

Si deseas hacer lo mismo que hicieron en el aula, lo que debes hacer es copiar y pegar este código en un archivo HTML y abrirlo en tu navegador web. Luego, haz clic en cualquier lugar de la pantalla y verás cómo aparece un círculo azul en esa posición.

Si tienes alguna otra pregunta o necesitas más ayuda, no dudes en preguntar. ¡Espero haber ayudado y buenos estudios!

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