Javascript Canvas Image onclick无法正常工作 [英] Javascript Canvas Image onclick not working
本文介绍了Javascript Canvas Image onclick无法正常工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我无法获得DOM Image onclick事件。
I am failing at getting a DOM Image onclick event to work.
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函数对于图像不是null。
Why do I not get the log message when i click on the image. In developer tools i can see the onclick function is not null for the image.
推荐答案
是的，Musa说的......以及其他一些东西。
Yes, what Musa said...and a few other things.
对您的代码进行了一些更改
- 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>
这篇关于Javascript Canvas Image onclick无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
