Javascript畫布圖像onclick不工作

我無法獲得DOM圖像onclick事件工作。Javascript畫布圖像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函數不爲空。

來源

2013-03-11 user2155429

您是如何點擊此圖片的，您甚至沒有將其添加到文檔中。 – Musa 2013-03-11 04:37:01

是的，穆薩說什麼......和其他一些事情。

一些更改代碼

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>

來源

2013-03-11 04:51:26 markE

您無法爲在畫布中添加的特定圖像設置onclick。你可以單獨設置整個畫布的onclick，所以你必須使用任何第三方js，否則你應該做一些計算，發現你點擊了畫布的圖像..

來源

2013-03-11 05:07:23

我不認爲這是正確的，再一次，我可能是錯的，你有任何支持你的答案的鏈接？ – 2013-03-11 05:08:41

http://stackoverflow.com/questions/11172087/canvas-images-and-click-event ..看看這個 – 2013-03-11 05:15:47

我相信這是最好的答案。我上面的例子是這樣設置的，因爲我在畫布上呈現了一個渲染動畫，並且想要使用一個圖像作爲按鈕。我真的認爲是骯髒的必須使用畫布點擊功能來確定圖像的邊界是否被點擊，但這樣吧。 – user2155429 2013-03-11 05:50:57

其他用戶是對的。

您在畫布上繪製的圖像是一個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); 

    } 
}

來源

2013-03-11 14:47:39 Saturnix

您可以在畫布上投射光線（在畫布上有onclick）並手動測試您的圖像是否與光線相交。你應該寫一個

objectsUnderPoint(x, y);

函數返回一個數組的所有圖像與在x，y射線相交。

這是通常在3D引擎中完成的方式。您當然需要將圖像位置作爲圖像的屬性進行相交測試。

來源

2014-07-23 18:09:35 David

Javascript畫布圖像onclick不工作

回答

相關問題