使可点击区域在画布中更改图像

问题描述：

请帮助我：

在画布下方创建可点击区域，我可以将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.

使可点击区域在画布中更改图像

相关推荐