Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
6
respuestas

no me funciona

copie el codigo exacto del video y lo ejecuto en el navegador(chrome) y no me funciona

<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 exhibirAlerta(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(x + "," + y);
    }

    pantalla.onclick = dibujarCirculo;
6 respuestas

Hola Miguel Angel, hay algunas correcciones que hacer: en offsettop va offsetTop, las dos veces es decir la segunda T es mayúscula. En ésas dos líneas falta el punto y coma al final y también en el alert pero éso no evita que funcione el código. en evento.pageX la X es mayúscula y en evento.pageY la Y es mayúscula. Por último te falta cerrar al final la etiqueta script . Saludos!

Ya realice las correciones y nose si ya funciona

<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 exhibirAlerta(evento) {
        var x = evento.pageX = pantalla.offsetLeft;
        var y = evento.pageY = pantalla.offseTop;
        console.log(evento);
        alert(x + "," + y)

    }

    function dibujarCirculo(evento) {
        var x = evento.pageX = pantalla.offsetLeft;
        var y = evento.pageY = pantalla.offseTop;

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

    pantalla.onclick = dibujarCirculo;

</script>

Hola Miguel, tienes varios errores de sintaxis, y en la funcióndibujarCirculo(evento) se debe es sumar para obtener el total de cada componente. Un saludo

<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 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 = dibujarCirculo;

</script>

Creo que esta sentencia está mal:

var y = evento.pageY = pantalla.offseTop;

Siempre es un buen ejercicio transcribir código, pero en lo posible es mejor evitar el copy & paste

Animo! no te rindas compañero

Consultando en MDN, efectivamente tienes un error en esa sentencia, la sentencia correcta sería:

var y = evento.pageY = pantalla.offsetTop;

Te comparto el enlace a la documentación:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop

Efectivamente podría corregir el ejercicio pero considero mas pedagógico darte las herramientas para que lo hagas por ti mismo.

Saludos!

Hola, en la explicación anterior se me escapó la parte de: var x = evento.pagex = pantalla.offsetLeft; y var y = evento.pagey = pantalla.offsettop Ahí lo que hicimos en el ejercicio fue restar; quedaría así en las dos funciones : var x = evento.pageX - pantalla.offsetLeft; y var y = evento.pageY -pantalla.offsetTop