Canvas addeventlistener点击图片

我想添加一个eventlistener到一张图片，所以一旦点击它将我带到另一个页面，此刻我有它带我到下一页，但不是当我点击图片时，但当我点击画布上的任何地方时Canvas addeventlistener点击图片

来源

2013-03-13 Nick

显示一些代码。显示问题的[JSFiddle]（http://jsfiddle.net/）示例将是有利的，但不是必需的 – musefan 2013-03-13 17:13:17

我不会将模糊的假设称为天赋。在不知道问题根源的情况下编码而不知道所有事实并提供答案是非常令人讨厌的特征。但通过一切手段，过你的生活。 – AlienWebguy 2013-03-13 17:59:53

响应单击画布事件

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

和尼克，“欢迎来到stackoverflow” - 它真的是充满了答案！

Norguard对画布无法追踪您点击的图像是正确的。把帆布想象成一个艺术家的画架，然后在画架上画画。是的，画架包含图像，但画架无法知道您在哪里画出任何图像。

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

如果你想开始每帆布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-13 20:16:15 markE

嗯，我的问题似乎确实被切断了：P谢谢你的回答，我得到的问题是它在游戏中的一个菜单，所以需要2/3“连接”用于游戏商店等等。使用上下箭头还是更复杂？ – Nick 2013-03-14 12:29:48

不复杂 - 请参阅上面编辑的答案。是否使用按键来驱动菜单是您的设计决策，但并不复杂。 ;） – markE 2013-03-14 13:14:56

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

1）监听画布
2）点击保存到您绘制的图像对象的引用......作为，知道它的画布坐标，在一个单独的对象保持引用：

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

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

来源

2013-03-13 17:17:44 Norguard

Canvas addeventlistener点击图片

回答

相关问题