前端canvas绘图,利用canvas在图片上面绘制标记以及给canvas添加点击事件。

前端canvas绘图,利用canvas在图片上面绘制标记以及给canvas添加点击事件。
需要实现的效果如下图:
在这里插入图片描述
首先需要一个承载的核心画布

<canvas id="canvas" width="800" height="600"></canvas>

全部代码:

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>canvas</title></head><body><canvas id="canvas" width="800" height="600"></canvas></body>
</html>
<script type="text/javascript">const canvas = document.getElementById('canvas');const ctx = canvas.getContext('2d');//绘制背景图var backgroundImg = new Image();backgroundImg.src = "ditu.png"; //可以是本地图片地址backgroundImg.onload = function() {//这里要注意,canvas.width,canvas.height要等于这个就是你的Canvas width heightctx.drawImage(this, 0, 0, canvas.width, canvas.height); // 绘制底图var topImg = new Image();//topImg.src = 'https://www.baidu.com/static/imgs/cw.jpg'; 此处可以网络地址topImg.src = "jizhong_n.png";topImg.onload = function() {var x = 680; // 假设你想在底图上的(680, 150)位置绘制上图var y = 150;ctx.drawImage(topImg, x, y); // 绘制上图}var topImg = new Image();topImg.src = "jizhong_n.png";topImg.onload = function() {var x = 580;var y = 250;ctx.drawImage(topImg, x, y); // 绘制上图}var topImg = new Image();topImg.src = "jizhong_n.png";topImg.onload = function() {var x = 130;var y = 350;ctx.drawImage(topImg, x, y); // 绘制上图}}//点击事件canvas.addEventListener('mousedown', function(e) {var x = e.offsetX,y = e.offsetY;// 检查点击的位置是否在蓝色矩形内if (x >= 684 && x <= 722 && y >= 152 && y <= 207) {alert('您点击了第1个蓝色区域!');}if (x >= 585 && x <= 621 && y >= 251 && y <= 310) {alert('您点击了第2个蓝色区域!');}console.log(x + "---" + y);});
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/22757.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

程序员职业素养的探索与实践

在数字化飞速发展的今天&#xff0c;程序员作为技术创新的核心力量&#xff0c;其职业素养的重要性愈发凸显。那么&#xff0c;对于程序员而言&#xff0c;什么样的职业素养是至关重要的呢&#xff1f;在我的职业生涯中&#xff0c;我深刻体会到&#xff0c;除了扎实的技术功底…

LabVIEW减压阀和温控阀综合测试系统

在使用LabVIEW开发阀门测试软件时&#xff0c;特别是针对减压阀和温控阀&#xff0c;测试内容和注意事项包括以下方面&#xff1a; 测试内容 压力测试&#xff1a; 入口压力&#xff1a;测量阀门在不同入口压力下的表现。 出口压力&#xff1a;确保减压阀能够将出口压力控制在…

k8s系列-使用containerd下载镜像并导入

1. 使用 containerd 下载镜像 首先&#xff0c;确保 containerd 已经安装并运行。然后使用 ctr 命令来拉取镜像&#xff1a; sudo ctr image pull docker.io/rancher/rancher-webhook:v0.4.32. 导出镜像 将拉取的镜像导出为 tar 文件&#xff1a; sudo ctr image export ra…

Spring AI 第二讲 之 Chat Model API 第五节HuggingFace Chat

HuggingFace Inference Endpoints 允许您在云中部署和提供机器学习模型&#xff0c;并通过 API 对其进行访问。 开始使用 有关 HuggingFace Inference Endpoints 的更多详细信息&#xff0c;请访问此处。 前提条件 添加 spring-ai-huggingface 依赖关系&#xff1a; <d…

systemctlm-cosim-demo项目分析

概述 systemctlm-cosim-demo项目是Xilinx的systemc库的demo工程。 环境安装 qemu安装 cd xilinx_proj/Downloads git clone https://github.com/Xilinx/qemu.git cd qemu git checkout 74d70f8008# Configure and build # zynq7000 # ./configure --target-list"arm-s…

【乐吾乐3D可视化组态编辑器】用开关控制巡检车和路灯

一、运动设备开关控制 3D组态编辑器地址&#xff1a;3D可视化组态 - 乐吾乐Le5le 1.在场景中新建模拟运动设备及控制面板&#xff1a;启动/停止 2.单击巡检车设备新建模拟动画 3.设置模拟动画属性 4.单击启动面板&#xff0c;新建交互事件 5.设置交互触发类型&#xff0c;新建…

JavaSE——【逻辑控制】(习题)

一、分支结构 2.1 if 语句 【练习】2.1.1 小明&#xff0c;如果这次考到90分以上&#xff0c;给你奖励一个大鸡腿&#xff0c;否则奖你一个大嘴巴子 int score 92;if(score > 90){System.out.println("吃个大鸡腿!!!");}else{System.out.println("挨大嘴…

PS系统教程11

HUD拾色器 作用&#xff1a;它可以帮助使用者更加高效地选择和使用颜色&#xff0c;从而提高工作效率和设计质量。 先确定色相值改变饱和度改变亮度使用HUD拾色器选中画笔工具画笔模式-正常shiftAlt右键 色相轮 上下移动从黑到白亮度变化左右移动从浅到深饱和度的变化选中颜…

【小海实习日记】PHP安装

## PHP环境搭建(Mac) ### php安装 使用brew需要安装homebrew >brew tap shivammathur/php >brew install shivammathur/php/php7.3 >brew link php7.3 这里可以需要homebrew使用代理进行下载&#xff0c;如果代理下载速度还是太慢&#xff0c;建议直接更该国内镜像…

数据分析必备:一步步教你如何用Pandas做数据分析(17)

1、Pandas 连接 Pandas 连接的操作实例 Pandas具有与SQL等关系数据库非常相似的功能齐全的高性能内存中连接操作。 Pandas提供单个功能merge作为DataFrame对象之间所有标准数据库联接操作的入口点 pd.merge(left, right, howinner, onNone, left_onNone, right_onNone,left_i…

新手必看!现货伦敦金新手容易犯的两个错

对很多刚进入现货伦敦金市场的朋友来说&#xff0c;炒伦敦金是十分令人兴奋的&#xff0c;但兴奋归兴奋&#xff0c;我们还是要注意&#xff0c;由于现货伦敦金投资者过分的热情&#xff0c;很容易让自己跌入一些陷阱&#xff0c;犯下一些错误&#xff0c;下面我们就来介绍两个…

Linux 命令 FIO:深入理解磁盘性能测试工具

Linux 命令 FIO&#xff1a;深入理解磁盘性能测试工具 在 Linux 系统中&#xff0c;磁盘 I/O 性能对于系统的整体性能至关重要。为了准确、快速地评估磁盘性能&#xff0c;我们需要一个强大的工具来模拟各种磁盘读写场景。FIO&#xff08;Flexible I/O Tester&#xff09;就是…

C++关于拷贝构造函数的一些理解

定义&#xff1a; 拷贝构造函数是C中的一种特殊的构造函数&#xff0c;用于创建一个对象的副本。它的作用是在对象之间进行拷贝初始化。拷贝构造函数通常以引用的方式接受同类型的对象作为参数&#xff0c;以完成对象的拷贝。程序中如果没有定义拷贝构造函数系统会生成一个默认…

echarts 数据重新加载,原数据依然存在图表上

watch: {data: {deep: true,handler(val) {this.resizeHandler();this.initChart(); 主要是这步this.render(val);}}},监听数据是否真正变化了 在数据变化的时候在重新初始化图表实例对象。 // 初始化渲染initChart() {chart this.$echarts.init(this.$refs.myChart);this.r…

智能楼宇安防3D数据可视化平台满足日益增长的安防需求

在当今社会&#xff0c;安全是每个人和企业最为关心的问题。为满足日益增长的安防需求&#xff0c;3D可视化公司深圳华锐视点隆重推出安防平台3D可视化管理系统&#xff0c;以先进的三维技术为您的安全保驾护航。 安防平台3D可视化管理系统通过创新的三维可视化技术&#xff0c…

纷享销客BI智能分析平台技术架构介绍

纷享销客BI智能分析平台致力于降低用户上手门槛&#xff0c;无缝继承纷享销客PaaS平台的对象关系模型和权限体系&#xff0c;让使用纷享CRM的营销人员、销售人员、服务人员等各类角色人员都能够将分析场景与业务场景相融合&#xff0c;将数据思维融合到自己的日常工作、团队工作…

SpringCloud-面试篇(二十三)

&#xff08;1&#xff09;SpringCloud常见组件有那些 有无数微服务需要相互调用&#xff1a;可以用远程调用组件OpenFeign组件&#xff0c;也可以用Dobble 这么多微服务相互调用怎么管理&#xff1a;就用到注册中心组件Nacos&#xff0c;Eureka 所有的服务去找注册中心做注…

TCP协议与UDP协议区别

举个列子&#xff1a; 三次握手&#xff1a;为了解决网络信道不可靠的问题&#xff1b;防止客户端向服务端发送两次数据&#xff0c;客户端一直处于接收的状态。 四次挥手是一样的。当客户端提出关闭请求&#xff0c;服务端处于关闭等待状态&#xff0c;此时客户端可以发送数据…

PMP考试难吗?考试通过率有多少?

我们通常以考试的通过率来评判一个考试的难易程度。通常通过率达到60%以上&#xff0c;这个考试就不太难&#xff1b;达到80% &#xff0c;这个考试就是不难的。 PMP考试难吗&#xff1f; 不少想要考PMP的小伙伴都会有这样的疑惑&#xff0c;首先以PMP的含金量来说&#xff0…

矩阵相乘torch.einsum()

einsum 是 Einstein summation 的缩写&#xff0c;来源于爱因斯坦求和约定&#xff08;Einstein summation convention&#xff09;。这是物理学家阿尔伯特爱因斯坦引入的一种简便记号&#xff0c;用于描述张量运算&#xff0c;特别是涉及多维数组的运算。 示例1&#xff1a;矩…