mardi 31 mars 2015

identify an object on canvas by a click event

into this simple code I use an eventListener which doesnt look to work at all. The canvas display an image and the given hitpaint function is supposed determines whether a click occurs. I cant understand why the eventListener behaves like that. Any insight would be helpful.



mycanv.addEventListener("click", function(e){
var output = document.getElementByID("output");
ctx.fillStyle = 'blue';
//ctx.clearRect(0,0,100,20);
if (hitpaint){
//ctx.fillText("hit",100,20);
output.innerHTML = "hit";
}
else
//ctx.fillText("miss",100,20);
output.innerHTML = "miss";

}, false);


the hitpaint looks like that:



function hitpaint(mouse_event) {

var bounding_box=mycanv.getBoundingClientRect();


var mousex=(mouse_event.clientX-bounding_box.left) *
(mycanv.width/bounding_box.width);
var mousey=(mouse_event.clientY-bounding_box.top) *
(mycanv.height/bounding_box.height);
var pixels=ctx.getImageData(mousex,mousey,1,1);

for (var i=3; i<pixels.data.length; i+=4) {
// If we find a non-zero alpha we can just stop and return
// "true" - the click was on a part of the canvas that's
// got colour on it.
if ( pixels.data[i]!==0 ) return true;
}


// The function will only get here if none of the pixels matched in

return false;
}


Finally the main loop which display the picture in random location into the canvas:



function start(){

// main game function, called on page load
setInterval( function() {

ctx.clearRect(cat_x, cat_y, 100, 100);
cat_x = Math.random() * mycanv.width-20;
cat_y = Math.random() * mycanv.height-20;
draw_katy(cat_x,cat_y);

}, 1000);
}

Aucun commentaire:

Enregistrer un commentaire