使可点击区域在画布中更改图像 [英] make clickable region in canvas to change image
问题描述
请帮助我：
-
在画布下方创建可点击区域，我可以将onmousedown = events分配给。我知道如何用隐形DIV来做到这一点，但我认为在画布上有一个更好的方式，我不知道。
create clickable regions in the canvas below that I can assign onmousedown= events to. I know how to do this with invisible DIVs, but I think there is a more elegant way to do it in canvas that I don't know.
我单击其中一个区域，想要将一个图像名称传递给一个函数，以便将显示的图像更改为另一个图像，然后将其更改为鼠标。
when I click one of the regions, want to pass an image name to a function so that it changes the image being displayed to another image, and then changes it back onmouseup.
如果你只显示一个区域和一个mousedown / mouseup示例，我可以做其余...感谢。
if you show me just one region and one mousedown/mouseup example I can do the rest...thanks.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<canvas id="myCanvas" width="506" height="319" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=new Image();
img.onload = function(){
ctx.drawImage(img,0,0);
};
img.src="firstImage.gif";
</script>
/////////HERE NEED/////////
CREATE CLICKABLE REGION <region>
<region>
onmousedown=changeCanvasImage(secondImage.gif) //change image on click
onmouseup=changeCanvasImage(firstImage.gif) /change it back when done
</region>
</body>
</html>
推荐答案
canvas元素可以触发事件，画布不能。要做到这一点，你需要自己实现它检测，并将值与画布中的某些内容相关联，或者使用许多可以处理的库库检测你。
The canvas element can fire events but graphical elements within the canvas cannot. To do this you'll either need to implement it yourself by detecting the position of the mouse on the canvas when it is clicked and relating the value to something in your canvas, or using one of the many canvas libraries available which will handle the detection for you.
这篇关于使可点击区域在画布中更改图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
