Question

我无法获得DOM Image onclick事件。

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);    

};

单击图像时，为什么我没有收到日志消息。在开发人员工具中，我可以看到图像的onclick函数不为null。

Answer 1

是的，Musa说的......以及其他一些事情。

对您的代码进行了一些更改

Image.src =“foo.png”应该出现在image.onclick函数
Context.drawImage应该在image.onclick函数
我认为不需要setInterval

试试这个：

<!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>

Answer 2

您无法为画布中添加的特定图像设置onclick。你可以单独为整个画布设置onclick，这样你就必须使用任何第三方js，否则你应该做一些计算，发现你点击了画布的图像..

Answer 3

其他用户是对的。

您在画布上绘制的图像是一个DOM元素，但它呈现的位置不存储在DOM中。

这并不意味着您可以访问它的位置并将其与鼠标位置进行比较。

我在这里使用外部库，但它可以满足您的需求：http://jsfiddle.net/Saturnix/cygUH/

this是使用的库。

由于我没有发布代码就无法发布到jsfiddles的链接，这里是我为你写的脚本。

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);

    }
}

Answer 4

您可以将光线（在画布上使用onclick）投射到画布中，并手动测试图像以与光线相交。你应该写一个

objectsUnderPoint( x, y );

返回与x，y处的光线相交的所有图像的数组的函数。

这也是通常在3D引擎中完成的方式。您需要将图像位置保持为图像的属性以进行相交测试。

Javascript Canvas Image onclick无效

4 个答案: