Question

我正在尝试将一个eventlistener添加到一张图片中，所以一旦点击它就会把我带到另一个页面，此刻我将它带到了下一页但不是当我点击图片时，但是当我点击任何地方时在画布上

Answer 1

你不能简单地做到这一点，并且没有事件监听器可以让你。

1）听画布上的点击
2）保持对您绘制的图像对象的引用...... ...通过在单独的对象中保持引用来了解其画布坐标：

var canvas_img = {
    x : 250,
    y : 300,
    data   : my_img, 
    width  : my_img.width,
    height : my_img.height
};

3）单击画布，手动计算在画布上发生单击的位置与图像在画布上的位置之间是否发生碰撞。

Answer 2

响应画布点击事件

哎呀，看起来你的问题被切断了！在你的下一个问题上，一定不要点击“输入”键 - 而不是在你的问题中开始一个新行，你将立即发布你的部分书面问题（不要担心......我们都已经完成了）。

尼克，“欢迎来到stackoverflow” - 它真的很有答案！

Norguard对于画布无法跟踪您点击的图像是正确的。将画布视为艺术家的画架，并在画架上绘画。是的，画架包含图像，但画架无法知道您在哪里绘制任何图像。

为了在学习过程中保持简单生活，请尝试从每个画布只有1个图像开始（是的，您可以拥有与图像一样多的画布元素）。

如果你想从每个画布的1个图像开始，这里是代码和小提琴：http://jsfiddle.net/m1erickson/KGKYg/

<!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 canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var img=new Image();
    img.onload=function(){
      canvas.width=img.width;
      canvas.height=img.height;
      ctx.drawImage(img,0,0);
    }
    img.src="http://dl.dropbox.com/u/139992952/coffee.png";

    canvas.addEventListener("click", function (e) { alert("use your linke totake me away...!"); }); 

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

</head>

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

[编辑：响应键盘事件]

以下是您可以监听用户按键并对其进行回复的方法：

// listen for keyboard events
window.addEventListener('keydown',keyIsDown,true);

// process the keystrokes
function keyIsDown(event){

    switch (event.keyCode) {
        case 38:
            // "UP" was pressed, do UP stuff
            break;
        case 40:
            // "DOWN" was pressed, do DOWN stuff
            break;
    }
}

Canvas addeventlistener单击图像

2 个答案: