2
respuestas

no me funciona

Referente al curso Lógica de programación: Practicando con juegos y animaciones, en el capítulo Interactuando con el usuario y actividad Mouse, en cuál posición estás

por Estudiante
| 23.3k xp | 11 posts
<canvas width="600" height="400">

</canvas>


    <script >


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

pincel.fillStyle = "grey"; // propiedad color en este caso
pincel.fillRect(0,0,600,400);  //funcion


function exibirAlerta ( evento ) {
    var x = evento.pageX- pantalla.ofsetleft;
    var y = evento.pageY- pantalla.ofsetTop;
    consolelog ( evento );
    alert(x + "," + y);
}

function dibujarCirculo ( evento ) {
    var x = evento.pageX - pantalla.ofsetleft;
    var y = evento.pageY - pantalla.ofsetTop;


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

}




//pantalla.onclick = exibirAlerta ;
pantalla.onclick = dibujarCirculo ;
    </script>
2 respuestas
por Estudiante
| 192.1k xp | 107 posts

Buen día Victor!

Tenías mal escrito offsetLeft; y offsetTop; en las funciones dibujarCirculo() y exibirAlerta(). Tambien te faltaba el punto en los dos console.log

Tu código corregido quedaría así:

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

<script >

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

pincel.fillStyle = "grey"; // propiedad color en este caso
pincel.fillRect(0,0,600,400);  //funcion

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

}

//pantalla.onclick = exibirAlerta ;
pantalla.onclick = dibujarCirculo ;
    </script>

Slds!

por Duverney Gutiérrez García
| 11.1k xp | 30 posts

Gracias José Antonio, buen sentido de observación, hay que ser muy cuidadoso con la sintaxis.