Javascript Canvas Image onclick不起作用答案

【问题标题】：Javascript Canvas Image onclick not workingJavascript Canvas Image onclick不起作用
【发布时间】：2014-07-24 02:09:35
【问题描述】：

我无法让 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 函数不为空。

【问题讨论】：

你到底是怎么点击这张图片的，你甚至没有将它添加到文档中。

标签： javascript html canvas

【解决方案1】：

是的，穆萨所说的……以及其他一些事情。

对代码的一些更改

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>

【讨论】：

【解决方案2】：

您不能为添加到画布中的特定图像设置 onclick。您可以单独为整个画布设置 onclick，因此您必须使用任何第三方 js，否则您应该进行一些计算，发现您点击了画布的图像..

【讨论】：

我不认为这是正确的，再次，我可能是错的，你有任何链接支持你的答案吗？
stackoverflow.com/questions/11172087/… .. 看看这个
我相信这是最好的答案。我上面的示例是这样设置的，因为我在画布上渲染动画并希望将图像用作按钮。我真的认为必须使用画布点击功能来确定是否点击了图像的边界是很脏的，但就这样吧。
然后为整个画布的高度和宽度绘制图像，然后为画布设置点击事件，以便您将图像作为按钮..

【解决方案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);

    }
}

【讨论】：

【解决方案4】：

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

objectsUnderPoint( x, y );

函数返回与射线在 x, y 处相交的所有图像的数组。

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

【讨论】：