当前位置： 首页 > news >正文

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

news 文章来源：https://blog.csdn.net/Kiss_code/article/details/139472119 2025/4/17 17:17:04

前端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绘图&#xff0c;利用canvas在图片上面绘制标记以及给canvas添加点击事件。 需要实现的效果如下图: 首先需要一个承载的核心画布 <canvas id"canvas" width"800" height"600"></canvas>全部代码&#xff1a; <!DOCT…...

编程日记 2024/6/6 12:51:15

38、Flink 的 WindowAssigner 之 GlobalWindows 示例

1、注意 使用 GlobalWindows 需要自定义 Trigger&#xff0c;否则窗口中的数据不会被计算。 2、代码示例 import org.apache.flink.streaming.api.datastream.DataStreamSource; import org.apache.flink.streaming.api.environment.StreamExecutionEnvironment; import org…...

编程日记 2024/6/6 12:49:13

同事仅靠着自己写的npm包跳槽去了大厂，羡慕了一整天

同事们之间总会悄悄聊一些话题&#xff0c;比如聊一些八卦啦&#xff0c;聊一些领导啦&#xff0c;也会偶尔说想跳槽&#xff0c;但这年头&#xff0c;跳槽多费劲啊&#xff0c;谁没事敢动。还别说&#xff0c;边上做了个同事&#xff0c;前两天还真要撤了&#xff0c;聊了半天…...

编程日记 2024/6/6 12:46:09

Yocto - bitbake任务中clean和cleanall的区别

在 BitBake 中&#xff0c;clean 和 cleanall 命令都用于删除构建工件&#xff0c;但它们的范围和执行的清理程度不同。 1. clean 命令&#xff1a; 目的&#xff1a;clean命令用于删除与特定任务或配方相关的临时构建文件和工件。 范围&#xff1a;它只清除指定任务或配方生…...

编程日记 2024/6/6 12:42:05

Spring 中如何控制 Bean 的加载顺序？

如果你脱口而出说添加 Order 注解或者是实现 Ordered 接口&#xff0c;那么恭喜&#xff0c;你掉坑了。 一 Order 注解和 Ordered 接口 在 Spring 框架中&#xff0c;Order 是一个非常实用的元注解&#xff0c;它位于 spring-core 包下&#xff0c;主要用于控制某些特定上下文…...

编程日记 2024/6/6 12:41:03

【学习笔记】Windows GDI绘图(十)Graphics详解(中)

文章目录 Graphics的方法AddMetafileComment添加注释BeginContainer和EndContainer新建、还原图形容器不指定指定源与目标矩形指定源与目标矩形 Clear清空并填充指定颜色CopyFromScreen截图CopyPixelOperation DrawImage绘制图像DrawImage的GraphicsDrawImageAbort回调ExcludeC…...

编程日记 2024/6/6 12:40:02

web学习笔记（六十二）

目录 1.键盘事件 2.KeepAlive 3.组件传值 3.1 兄弟组件传值 3.2 组件树传值 3.3 发布订阅者传值 1.键盘事件 keydown表示键盘事件&#xff0c;在不加修饰符的情况下&#xff0c;点击键盘上的任意位置都可以触发键盘事件&#xff0c; <template><div><!--…...

编程日记 2024/6/6 12:36:56

每天CTF小练一点--ctfshow年CTF

初一 题目&#xff1a; 2023是兔年&#xff0c;密码也是。聪明的小伙伴们&#xff0c;你能破解出下面的密码吗&#xff1f; 感谢大菜鸡师傅出题 flag格式是ctfshow{xxxxxx}.或许密码也有密码。 密文是&#xff1a; U2FsdGVkX1M7duRffUvQgJlESPfOTV2i4TJpc9YybgZ9ONmPk/RJje …...

编程日记 2024/6/6 12:35:55

Java Set接口 - TreeSet类

TreeSet 是 Java 集合框架中的一个类&#xff0c;它实现了 NavigableSet 接口&#xff0c;而 NavigableSet 是 SortedSet 接口的一个子接口。TreeSet 基于红黑树&#xff08;一种自平衡的二叉搜索树&#xff09;实现&#xff0c;因此它可以保证集合中的元素以升序排列。 以下是…...

编程日记 2024/6/6 12:34:54

css 理解了原理，绘制三角形就简单了

1.border-位置 注意&#xff1a;border-bottom/up/right/left 主要是以三角形的结构搭建而成&#xff0c;而border也是如此。而且从边框的外围开始计算像素尺寸。在理解了这一点之后&#xff0c;绘制三角形就简单多了。 1.transparent 注意&#xff1a;该属性主要是颜色透明…...

编程日记 2024/6/6 12:32:52

【JavaEE进阶】——MyBatis操作数据库 (#{}与${} 以及 动态SQL）

目录 &#x1f6a9;#{}和${} &#x1f388;#{} 和 ${}区别 &#x1f388;${}使用场景 &#x1f4dd;排序功能 &#x1f4dd;like 查询 &#x1f6a9;数据库连接池 &#x1f388;数据库连接池使⽤ &#x1f6a9;MySQL开发企业规范 &#x1f6a9;动态sql &#x1f388…...

编程日记 2024/6/6 12:31:51

电阻应变片的结构

电阻应变片的结构 常用的电阻应变片有金属应变片和半导体应变片两种。金属应变片分为体型和薄膜型。半导体应变片常见的有体型、薄膜型、扩散型、外延型、PN结及其他形式。图2—2所示为工程常见的应变片实物。 电阻应变片的典型结构如图2—3所示。它由敏感栅、基底、覆盖层和引…...

编程日记 2024/6/6 12:30:50

云原生时代：从 Jenkins 到 Argo Workflows，构建高效 CI Pipeline

作者&#xff1a;蔡靖 Argo Workflows Argo Workflows [ 1] 是用于在 Kubernetes 上编排 Job 的开源的云原生工作流引擎。可以轻松自动化和管理 Kubernetes 上的复杂工作流程。适用于各种场景&#xff0c;包括定时任务、机器学习、ETL 和数据分析、模型训练、数据流 pipline、…...

编程日记 2024/6/6 12:29:49

【数据库系统概论】事务

概述 在数据库系统中&#xff0c;事务&#xff08;Transaction&#xff09;是指一组作为单个逻辑工作单元执行的操作。这些操作要么全部成功&#xff08;提交&#xff09;&#xff0c;要么全部失败&#xff08;回滚&#xff09;。事务的主要目的是确保数据库的完整性和一致性&…...

编程日记 2024/6/6 12:26:46

C++-排序算法详解

目录 一. 冒泡排序&#xff1a; 二. 插入排序&#xff1a; 三. 快速排序&#xff1a; 四. 选择排序 五, 归并排序 六, 堆排序. 排序算法是一种将一组数据按照特定顺序&#xff08;如升序或降序&#xff09;进行排列的算法。 其主要目的是对一组无序的数据进行整理&#…...

编程日记 2024/6/6 12:25:45

Kotlin 引用（双冒号::）

文章目录 双冒号::引用函数普通函数成员函数类构造函数 引用变量&#xff08;很少用&#xff09;普通变量成员变量 双冒号:: Kotlin 中可以使用双冒号::对某一变量、函数进行引用。 Note&#xff1a;MyClass::class可用于获取KClass<MyClass>&#xff0c;此时的双冒号::…...

编程日记 2024/6/6 12:24:44

C++ day3练习

设计一个Per类&#xff0c;类中包含私有成员:姓名、年龄、指针成员身高、体重&#xff0c;再设计一个Stu类&#xff0c;类中包含私有成员:成绩、Per类对象p1&#xff0c;设计这两个类的构造函数、析构函数。 #include <iostream>using namespace std;class Per{private:…...

编程日记 2024/6/6 12:23:43

命令模式（行为型）

目录 一、前言 二、命令模式 三、总结 一、前言 命令模式&#xff08;Command Pattern&#xff09;是一种行为型设计模式&#xff0c;命令模式将一个请求封装为一个对象&#xff0c;从而可以用不同的请求对客户进行参数化&#xff1b;对请求排队或记录请求日志&#xff0c;以…...

编程日记 2024/6/6 12:22:42

韩雪医生针药结合效果好 患者赠送锦旗表感谢

任先生长年献血身体出现不适&#xff0c;身上多处发黑发冷&#xff0c;伴随疼痛&#xff0c;而且还有慢性腹泻的症状。他曾前往苏州各大医馆做过检查&#xff0c;均查不出异常&#xff0c;但身体确实不舒服&#xff0c;面色晦暗。 后来他来到李良济&#xff0c;求诊于韩雪医生。…...

编程日记 2024/6/6 12:19:39

【队列、堆、栈 解释与区分】

文章目录 概要队列&#xff08;Queue&#xff09;定义特性应用场景 堆&#xff08;Heap&#xff09;定义特性应用场景 栈&#xff08;Stack&#xff09;定义特性应用场景 总结 概要 队列、堆和栈是三种常见的数据结构&#xff0c;它们各自具有不同的特性和应用场景。下面是对这…...

编程日记 2024/6/6 12:18:38

NTP网络时间服务器_安徽京准电钟

NTP网络时间服务器_安徽京准电钟 NTP网络时间服务器_安徽京准电钟 概述 NTP网络时间服务器是一款支持NTP和SNTP网络时间同步协议&#xff0c;高精度、大容量、高品质的高科技时钟产品。 NTP网络时间服务器设备采用冗余架构设计&#xff0c;高精度时钟直接来源于北斗、GPS系统中…...

编程日记 2024/6/6 12:17:37

Java：爬虫框架

一、Apache Nutch2 【参考地址】 Nutch 是一个开源Java 实现的搜索引擎。它提供了我们运行自己的搜索引擎所需的全部工具。包括全文搜索和Web爬虫。 Nutch 致力于让每个人能很容易, 同时花费很少就可以配置世界一流的Web搜索引擎. 为了完成这一宏伟的目标, Nutch必须能够做到…...

编程日记 2024/6/6 12:16:36

ChatGPT基本原理详细解说

ChatGPT基本原理详细解说 引言 在人工智能领域&#xff0c;自然语言处理&#xff08;NLP&#xff09;一直是研究的热点之一。随着技术的发展&#xff0c;我们见证了从简单的聊天机器人到复杂的语言模型的演变。其中&#xff0c;ChatGPT作为一项突破性技术&#xff0c;以其强大…...

编程日记 2024/6/6 12:13:31

Java日期时间处理深度解析：从Date、Calendar到SimpleDateFormat

粉丝福利&#xff1a;微信搜索「万猫学社」&#xff0c;关注后回复「电子书」&#xff0c;免费获取12本Java必读技术书籍。 Java中的日期和时间处理 在Java中&#xff0c;日期和时间的处理一直是一个复杂而繁琐的任务。那么&#xff0c;为什么会这样呢&#xff1f;让我们先来看…...

编程日记 2024/6/6 12:11:29

Flutter 中的 CupertinoUserInterfaceLevel 小部件：全面指南

Flutter 中的 CupertinoUserInterfaceLevel 小部件&#xff1a;全面指南 Flutter 是一个功能强大的 UI 框架&#xff0c;由 Google 开发&#xff0c;允许开发者使用 Dart 语言构建跨平台的移动、Web 和桌面应用。在 Flutter 的 Cupertino&#xff08;iOS 风格&#xff09;组件…...

编程日记 2024/6/6 12:10:28

区块链学习记录01

在学习过程中所遇到的问题&#xff0c;及其解。 Q:区块链中分布式账本的存在&#xff0c;让所有人都知道资金的变动吗&#xff1f; A:区块链中的分布式账本确实让参与网络的所有节点都能够了解账户之间的资金变动。这是因为区块链是一个分布式数据库&#xff0c;其中包含着所…...

编程日记 2024/6/6 12:09:27

python--装饰器

[掌握]装饰器入门 语法糖 目标&#xff1a;掌握装饰器的快速使用。 装饰器本质上就是闭包&#xff0c;但装饰器有特殊作用&#xff0c;那就是&#xff1a;在不改变原有函数的基础上&#xff0c;给原有函数增加额外功能。 定义装饰器&#xff1a; def outer([外面参数列表]):…...

编程日记 2024/6/6 12:08:26

Docker：定义未来的软件部署

1. 概述 Docker&#xff0c;这个在技术圈里频频被提及的名词&#xff0c;实际上是一种开源的容器化技术。它允许开发者将应用程序及其依赖打包成一个标准化的单元——容器&#xff0c;确保应用在任何环境中都能够一致地运行。从开发者的本地机器到全球的云平台&#xff0c;Doc…...

编程日记 2024/6/6 12:07:25

ros常用环境变量

RMW层DDS实现 rti dds export RMW_IMPLEMENTATIONrmw_connextdds //rti dds 或者 RMW_IMPLEMENTATIONrmw_connextdds ros2 run ... export NDDS_QOS_PROFILES/qos.xml //配置qos文件fastdds export RMW_IMPLEMENTATIONrmw_fastrtps_cpp 或者 RMW_IMPLEMENTATIONrmw_fas…...

编程日记 2024/6/6 12:06:24

python学习 - 爬虫案例 - 爬取链接房产信息入数据库代码实例

#codingutf-8 #!/usr/bin/python # 导入requests库 import requests # 导入文件操作库 import os import re import bs4 from bs4 import BeautifulSoup import sys from util.mysql_DBUtils import mysql# 写入数据库 def write_db(param):try:sql "insert into house (…...

编程日记 2024/6/6 12:05:22