gpt4 book ai didi

javascript - 在 Canvas 中制作可点击区域以更改图像

转载 作者:搜寻专家 更新时间:2023-10-31 23:10:07 25 4
gpt4 key购买 nike

请帮帮我:

  • 在下面的 Canvas 中创建可点击区域,我可以将 onmousedown= 事件分配给该区域。我知道如何使用不可见的 DIV 执行此操作,但我认为有一种我不知道的在 Canvas 中执行此操作的更优雅的方法。

  • 当我点击其中一个区域时,我想将一个图像名称传递给一个函数,以便它将正在显示的图像更改为另一个图像,然后在鼠标弹起时将其更改回。

如果你只给我一个区域和一个 mousedown/mouseup 的例子,我可以做剩下的......谢谢。

<!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 元素可以触发事件,但 Canvas 内的图形元素不能。为此,您需要通过检测 position of the mouse on the canvas 自己实现它单击它并将值与 Canvas 中的某些内容相关联时,或使用众多 canvas libraries 之一available 将为您处理检测。

关于javascript - 在 Canvas 中制作可点击区域以更改图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10710579/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com