将单击事件添加到画布上的图像中
将单击事件添加到画布上的图像中
提问于 2014-11-15 17:08:53
我创造了一个画布，并在上面添加了一个图像。我想要添加一个点击事件到该图像。下面是我同样的代码。
<canvas id="myCanvas" width="578" height="1000"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
//This code is for adding leftArrow icon
var leftArrow = new Image();
leftArrow.src = "leftArrow.jpg";
leftArrow.addEventListener("click",function(){alert("hello");},false); //this is not working
leftArrow.onclick=function(){alert("image click");}
drawScreen();
function drawScreen() {
//context.drawImage(leftArrow, 218, 482);//leftArrow
leftArrow.onload = function(){
context.drawImage(leftArrow, 218, 482);
}
}
</script>我想将事件添加到它的单击中。
回答 1
Stack Overflow用户
发布于 2014-11-15 17:13:39
您将在leftArrow上分配单击事件。当您在leftArrow上绘制canvas时，复制图像内容，而不是事件。
事实上，new Image()和document.createElement("img")差不多--你可以得到一个<img ...>。
因此，要将click事件分配给画布，您必须这样做：
canvas.addEventListener("click", function() {alert("click");});如果只想检查单击是否位于箭头所在的矩形内，则需要获取单击偏移量并计算它：
var x,y; //Click offsets, here I assume they already have the value
var posx, posy; //Position of the arrow, the values you used as .drawImage parameters
var endx = posx + leftArrow.width;
var endy = posy + leftArrow.height;
if( (x>posx && y>posy) && (x<endx && y<endy) )
alert("Arrow was clicked!");另外，在设置属性之后，从不将onload分配给图像。映像以异步方式加载，并且有可能在您设置onload事件之前加载。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26948389
复制相关文章
相似问题
腾讯云开发者
