前端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>
相关文章：
前端canvas绘图，利用canvas在图片上面绘制标记以及给canvas添加点击事件。
前端canvas绘图，利用canvas在图片上面绘制标记以及给canvas添加点击事件。 需要实现的效果如下图: 首先需要一个承载的核心画布 <canvas id"canvas" width"800" height"600"></canvas>全部代码： <!DOCT…...
38、Flink 的 WindowAssigner 之 GlobalWindows 示例
1、注意 使用 GlobalWindows 需要自定义 Trigger，否则窗口中的数据不会被计算。 2、代码示例 import org.apache.flink.streaming.api.datastream.DataStreamSource; import org.apache.flink.streaming.api.environment.StreamExecutionEnvironment; import org…...
同事仅靠着自己写的npm包跳槽去了大厂，羡慕了一整天
同事们之间总会悄悄聊一些话题，比如聊一些八卦啦，聊一些领导啦，也会偶尔说想跳槽，但这年头，跳槽多费劲啊，谁没事敢动。还别说，边上做了个同事，前两天还真要撤了，聊了半天…...
Yocto - bitbake任务中clean和cleanall的区别
在 BitBake 中，clean 和 cleanall 命令都用于删除构建工件，但它们的范围和执行的清理程度不同。 1. clean 命令： 目的：clean命令用于删除与特定任务或配方相关的临时构建文件和工件。 范围：它只清除指定任务或配方生…...
Spring 中如何控制 Bean 的加载顺序？
如果你脱口而出说添加 Order 注解或者是实现 Ordered 接口，那么恭喜，你掉坑了。 一 Order 注解和 Ordered 接口 在 Spring 框架中，Order 是一个非常实用的元注解，它位于 spring-core 包下，主要用于控制某些特定上下文…...
【学习笔记】Windows GDI绘图(十)Graphics详解(中)
文章目录 Graphics的方法AddMetafileComment添加注释BeginContainer和EndContainer新建、还原图形容器不指定指定源与目标矩形指定源与目标矩形 Clear清空并填充指定颜色CopyFromScreen截图CopyPixelOperation DrawImage绘制图像DrawImage的GraphicsDrawImageAbort回调ExcludeC…...
web学习笔记（六十二）
目录 1.键盘事件 2.KeepAlive 3.组件传值 3.1 兄弟组件传值 3.2 组件树传值 3.3 发布订阅者传值 1.键盘事件 keydown表示键盘事件，在不加修饰符的情况下，点击键盘上的任意位置都可以触发键盘事件， <template><div><!--…...
每天CTF小练一点--ctfshow年CTF
初一 题目： 2023是兔年，密码也是。聪明的小伙伴们，你能破解出下面的密码吗？ 感谢大菜鸡师傅出题 flag格式是ctfshow{xxxxxx}.或许密码也有密码。 密文是： U2FsdGVkX1M7duRffUvQgJlESPfOTV2i4TJpc9YybgZ9ONmPk/RJje …...
Java Set接口 - TreeSet类
TreeSet 是 Java 集合框架中的一个类，它实现了 NavigableSet 接口，而 NavigableSet 是 SortedSet 接口的一个子接口。TreeSet 基于红黑树（一种自平衡的二叉搜索树）实现，因此它可以保证集合中的元素以升序排列。 以下是…...
css 理解了原理，绘制三角形就简单了
1.border-位置 注意：border-bottom/up/right/left 主要是以三角形的结构搭建而成，而border也是如此。而且从边框的外围开始计算像素尺寸。在理解了这一点之后，绘制三角形就简单多了。 1.transparent 注意：该属性主要是颜色透明…...
【JavaEE进阶】——MyBatis操作数据库 (#{}与${} 以及 动态SQL）
目录 🚩#{}和${} 🎈#{} 和 ${}区别 🎈${}使用场景 📝排序功能 📝like 查询 🚩数据库连接池 🎈数据库连接池使⽤ 🚩MySQL开发企业规范 🚩动态sql 🎈…...
电阻应变片的结构
电阻应变片的结构 常用的电阻应变片有金属应变片和半导体应变片两种。金属应变片分为体型和薄膜型。半导体应变片常见的有体型、薄膜型、扩散型、外延型、PN结及其他形式。图2—2所示为工程常见的应变片实物。 电阻应变片的典型结构如图2—3所示。它由敏感栅、基底、覆盖层和引…...
云原生时代：从 Jenkins 到 Argo Workflows，构建高效 CI Pipeline
作者：蔡靖 Argo Workflows Argo Workflows [ 1] 是用于在 Kubernetes 上编排 Job 的开源的云原生工作流引擎。可以轻松自动化和管理 Kubernetes 上的复杂工作流程。适用于各种场景，包括定时任务、机器学习、ETL 和数据分析、模型训练、数据流 pipline、…...
【数据库系统概论】事务
概述 在数据库系统中，事务（Transaction）是指一组作为单个逻辑工作单元执行的操作。这些操作要么全部成功（提交），要么全部失败（回滚）。事务的主要目的是确保数据库的完整性和一致性&…...
C++-排序算法详解
目录 一. 冒泡排序： 二. 插入排序： 三. 快速排序： 四. 选择排序 五, 归并排序 六, 堆排序. 排序算法是一种将一组数据按照特定顺序（如升序或降序）进行排列的算法。 其主要目的是对一组无序的数据进行整理&#…...
Kotlin 引用（双冒号::）
文章目录 双冒号::引用函数普通函数成员函数类构造函数 引用变量（很少用）普通变量成员变量 双冒号:: Kotlin 中可以使用双冒号::对某一变量、函数进行引用。 Note：MyClass::class可用于获取KClass<MyClass>，此时的双冒号::…...
C++ day3练习
设计一个Per类，类中包含私有成员:姓名、年龄、指针成员身高、体重，再设计一个Stu类，类中包含私有成员:成绩、Per类对象p1，设计这两个类的构造函数、析构函数。 #include <iostream>using namespace std;class Per{private:…...
命令模式（行为型）
目录 一、前言 二、命令模式 三、总结 一、前言 命令模式（Command Pattern）是一种行为型设计模式，命令模式将一个请求封装为一个对象，从而可以用不同的请求对客户进行参数化；对请求排队或记录请求日志，以…...
韩雪医生针药结合效果好 患者赠送锦旗表感谢
任先生长年献血身体出现不适，身上多处发黑发冷，伴随疼痛，而且还有慢性腹泻的症状。他曾前往苏州各大医馆做过检查，均查不出异常，但身体确实不舒服，面色晦暗。 后来他来到李良济，求诊于韩雪医生。…...
【队列、堆、栈 解释与区分】
文章目录 概要队列（Queue）定义特性应用场景 堆（Heap）定义特性应用场景 栈（Stack）定义特性应用场景 总结 概要 队列、堆和栈是三种常见的数据结构，它们各自具有不同的特性和应用场景。下面是对这…...
前端倒计时误差!
提示：记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来？二、五大解决方案1. 动态校准法（基础版）2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...
解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八
现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet，点击确认后如下提示 最终上报fail 解决方法 内核升级导致，需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...
蓝桥杯 2024 15届国赛 A组 儿童节快乐
P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡，轻快的音乐在耳边持续回荡，小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下，六一来了。 今天是六一儿童节，小蓝老师为了让大家在节…...
【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍，多层嵌套定位示例
文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解（初学者版） 1. static（默认值） 2. relative（相对定位） 3. absolute（绝对定位） 4. fixed（固定定位） 5. sticky（粘性定位） 三、定位元素的层级关系（z-i…...
工程地质软件市场：发展现状、趋势与策略建议
一、引言 在工程建设领域，准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具，正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...
postgresql|数据库|只读用户的创建和删除（备忘）
CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...
OkHttp 中实现断点续传 demo
在 OkHttp 中实现断点续传主要通过以下步骤完成，核心是利用 HTTP 协议的 Range 请求头指定下载范围： 实现原理 Range 请求头：向服务器请求文件的特定字节范围（如 Range: bytes1024-） 本地文件记录：保存已…...
DIY｜Mac 搭建 ESP-IDF 开发环境及编译小智 AI
前一阵子在百度 AI 开发者大会上，看到基于小智 AI DIY 玩具的演示，感觉有点意思，想着自己也来试试。 如果只是想烧录现成的固件，乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外，还提供了基于网页版的 ESP LA…...
Axios请求超时重发机制
Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式： 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...
零基础设计模式——行为型模式 - 责任链模式
第四部分：行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习！行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想：使多个对象都有机会处…...