0

我正在尝试将事件侦听器添加到图片中，因此一旦单击它就会将我带到另一个页面，此时我将它带到下一页但不是当我单击图片时，而是当我单击画布上的任意位置时

4

2 回答 2

1

响应画布点击事件

糟糕，您的问题似乎被切断了！在您的下一个问题上，请确保不要按“Enter”键——而不是在您的问题中开始一个新行，您将立即发布您部分写好的问题（别担心……我们都已经完成了）。

还有尼克，“欢迎来到 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;
    }
}
于 2013-03-13T20:16:15.420 回答
1

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

1) 监听画布上的点击
2) 保留对您绘制的图像对象的引用... ...如，通过将引用保存在单独的对象中来了解其画布坐标：

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

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

于 2013-03-13T17:17:44.210 回答