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點擊圖片

回答

相關問題