在画布中制作可点击区域来更改图像

2023-12-14

请帮我:

  • 在下面的画布中创建可点击区域,我可以将 onmousedown= 事件分配给该区域。我知道如何使用不可见的 DIV 来做到这一点,但我认为有一种我不知道的更优雅的方法可以在画布中做到这一点。

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

如果您只向我展示一个区域和一个 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 元素可以触发事件,但画布内的图形元素不能。为此,您需要通过检测来自行实现鼠标在画布上的位置单击它并将该值与画布中的某些内容相关联,或者使用其中之一画布库可用它将为您处理检测。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在画布中制作可点击区域来更改图像 的相关文章

随机推荐

  • JPA ManyToMany 对于用户和组?

    同样的问题在这里 但这对我没有帮助 我有三个表和多对多连接 在我的 JSF 应用程序中 我尝试添加用户 在我的组表中 有三个不同的组 管理员 客户和用户 我做了什么 将数据插入 jsf 表单后 用户单击 保存 名为 usersControl
  • 将淡入淡出效果应用于 UICollectionView 的顶部和底部

    我已经阅读了这里的示例 但我无法按照我想要的方式进行操作 不知何故 我的渐变示例卡在屏幕中间 无法按预期工作 我有一个UICollectionView它用垂直滚动填充整个屏幕 我想要顶部和底部UICollectionView为黑色 中间为透
  • fill() 之后设置矩阵中的值返回不正确的矩阵[重复]

    这个问题在这里已经有答案了 如果我像这样初始化矩阵 x O O O O O O O O O 然后设置x 0 1 X 它返回 O X O O O O O O O 正如预期的那样 但是 如果我按如下方式初始化矩阵 x new Array 3 f
  • 级联下拉菜单删除先前选定的内容

    我正在尝试在 html 中添加 7 个下拉框 它们都将填充相同的数据 我想做的是 当选择第一个下拉列表时 它将从下一个下拉列表中删除所选项目 因此 如果您在一个下拉列表中有数字 A B C D E F G H I 如果我在第一个下拉列表中选
  • 如何在symfony中检索带有ID的一条记录之后的所有记录?

    假设我有一个表 我在 symfony 中按字母顺序排序 每个项目都有一个相当随机的 ID 我想检索某个 ID 之后的所有项目 例如 Name ID Apple 5 Banana 9 Coconut 3 Date 1 Eggplant 8 假
  • Google Chrome 开发工具中的交叉样式属性是什么意思?

    使用 Chrome 的开发工具检查元素时 在元素选项卡中 右侧的 样式 栏会显示相应的 CSS 属性 有时 其中一些属性会被删除 这些属性意味着什么 当 CSS 属性显示为删除线时 意味着应用了划掉的样式 但随后被更具体的选择器 更本地化的
  • 运行并行进程并在其中一个失败时退出所有进程

    我有这段代码 首先make t1 make t2 and make t3在平行下 有没有一种方法可以在 make 进程失败时终止其余进程 例如 如果make t2失败 脚本应该终止其他 2 个正在运行的脚本 make t1 and make
  • 我可以在谷歌地图路线上放置多少个标记有限制吗?

    我可以在谷歌地图路线上放置多少个标记有限制吗 如果是 如何克服 我的开发人员说他不能在路线上添加超过 10 个标记 是的 我在网上找不到任何与此相关的内容 TIA 根据文档 for v3 允许的最大航路点为 8 个 加上出发地和目的地 Ma
  • 如何从node-mongodb本机驱动程序获取db实例?

    考虑一下 我在 main 中打开了 MongoDB 连接app js文件本身和以下代码落在它的回调中 mongodb connect MongoDBUrlGoesHere function err db app listen app get
  • CSS 当有 2 个类时不推荐使用单个类

    有一个 div 它有 2 个类名 like div class A B 我想要的是如果有 A B 它将被弃用 A AND B 样式 仅使用 A B style 是否可以 如果一个元素有类A 那么它有类A 并且您不能通过添加另一个类来 关闭它
  • Gem5 中与 ARM 裸机的 UART 通信

    我目前正在使用 Gem5 我必须通过 UART 从我的主机访问 ARMv8 裸机选项 所以我尝试了很多方法 但我还没有准备好 您能否让我知道 如何在裸机类型编程中将主机的串行端口映射到 ARMv8 的串行端口 任何帮助 将不胜感激 工作设置
  • 递归条件类型

    我想递归地映射一个对象 以便将对象中的原始值转换为其他类型 例如 我想要一个像这样的对象 const before a c b d 变成这样 const after a c Test b Test d Test 我还假设价值观不会Date
  • 服务器重新启动后重新启动 WCF 服务

    WCF 中是否有某种机制可用于 预启动 热身 托管在 IIS 中的 WCF 服务 类似于 SharePoint 网站的预热脚本 我遇到过这样的情况 服务器在夜间重新启动 第二天 WCF 服务启动时会出现很长的延迟 我无法更改使用这些服务的各
  • 如何在列表理解中设置局部变量?

    我有一个方法 它接受一个列表并返回一个对象 input a list returns an object def map to obj lst a list f lst return a list 0 if a list else None
  • 使用 C# 通过 SSH 隧道连接 MySQL

    我尝试使用 SSH 隧道通过 C 访问我的 MySQL 数据库 但出现异常 无法连接到任何指定的 MySQL 主机 我在这个的帮助下得到了这个代码 C 到 MySQL 服务器的 SSH 隧道 这是我的代码 PasswordConnectio
  • UIView拖动(图像和文本)

    当 UIView 有图像和文本时 是否可以在 iOS 屏幕上拖动 UIView 例如小卡片 您能给我指出类似 已解决 的主题吗 我还没有找到 根据 pepouze 的答案 这就是一个简洁的解决方案 测试过 有效 void touchesMo
  • 如何使用一个Python脚本运行另一个Python脚本并向其传递变量? [复制]

    这个问题在这里已经有答案了 我有一个 Python 脚本 我们就这样称呼它吧控制器 py 我想用控制器 py运行另一个 Python 脚本并向其传递多个变量 我们来调用第二个脚本分析器 py 在不导入的情况下执行此操作的最佳方法是什么分析器
  • 使用同一接口调用多个类

    我有一个像这样的界面 public interface IAddressProvider string GetAddress double lat double long 在我的消费类中 我想循环遍历具体的提供者 直到得到结果 例如 简化的
  • 使用 jQuery 动态隐藏表格行

    我正在尝试替换表行的背景颜色 每个部分都以相同的颜色开始 我通过以下代码实现了这一点 document ready function tbody tr row nth child even css background efefef 我还需
  • 在画布中制作可点击区域来更改图像

    请帮我 在下面的画布中创建可点击区域 我可以将 onmousedown 事件分配给该区域 我知道如何使用不可见的 DIV 来做到这一点 但我认为有一种我不知道的更优雅的方法可以在画布中做到这一点 当我单击其中一个区域时 想要将图像名称传递给