Javascript Canvas Image onclick not working

问题

I am failing at getting a DOM Image onclick event to work.

var context = document.getElementById('canvas').getContext('2d');

var image = new Image();
image.src = "foo.png"
image.onclick = function(e) { console.log("clicked"); }


setInterval(function() {

context.drawImage(image, 100, 100, 50, 50);    

};

Why do I not get the log message when i click on the image. In developer tools i can see the onclick function is not null for the image.

回答1:

Yes, what Musa said...and a few other things.

Some changes to your code

Image.src=”foo.png” should come after the image.onclick function
Context.drawImage should be inside the image.onclick function
setInterval is not needed as far as I can see

Try this:

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var context=document.getElementById("canvas").getContext("2d");

    var image=new Image();
    image.onload=function(){
       context.drawImage(image,0,0);
    }
    image.src="http://i.imgur.com/nJiIJIJ.png";

    document.getElementById("canvas").addEventListener("click", function(){console.log("clicked");}, false);


}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

回答2:

You cannot set onclick for a particular image added in canvas . You can set onclick for the whole canvas alone so you have to use any third party js or else you should do some calculations which finds that you clicked on the image of the canvas ..

回答3:

Other users are right.

The image you draw on the canvas is a DOM element but it is rendered in a position which is not stored in the DOM.

This doesn't mean you can access it's position and compare it with the mouse position.

I'm using an external library here, but it does what you need: http://jsfiddle.net/Saturnix/cygUH/

this is the library used.

Since I can't post link to jsfiddles without posting the code, here's the script I've wrote for you.

function demo(g) {
    g.ctx.font = "bold 16px Arial";

    g.draw = function () {
        g.ctx.clearRect(0, 0, g.width, g.height)

        var posX = 0;
        var posY = 0;
        g.ctx.drawImage(image, posX, posY);

        if (g.mouseX > posX && g.mouseX < image.width &&
            g.mouseY > posY && g.mouseY < image.height &&
            g.mousePressed)
        g.ctx.fillText("You're clicking the image!", g.mouseX, g.mouseY);

    }
}

回答4:

You can cast a ray (with an onclick on the canvas) into the canvas and manually test your images for intersection with the ray. You should write a

objectsUnderPoint( x, y );

function that returns an array of all the images that intersect with the ray at x, y.

This is the way it is usually done in 3D engines as well. You ofcourse need to keep the image position as a property of the image for intersection testing.

来源：https://stackoverflow.com/questions/15331264/javascript-canvas-image-onclick-not-working

标签

javascript

html

canvas