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

Canvas鼠标画线

news 2026/2/10 20:45:25
鼠标按下开始画线,鼠标移动根据鼠标的轨迹去画,鼠标抬起停止画线
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Canvas Drawing</title><style>canvas {border: 1px solid #000;}</style>
</head><body><canvas id="myCanvas" width="500" height="500"></canvas><script>document.addEventListener('DOMContentLoaded', function () {const canvas = document.getElementById('myCanvas')const ctx = canvas.getContext('2d')let isDrawing = falsefunction startDrawing (e) {isDrawing = truedraw(e)}function stopDrawing () {isDrawing = falsectx.beginPath() // Reset the path for the next draw}function draw (e) {if (!isDrawing) returnctx.lineWidth = 5ctx.lineCap = 'round'ctx.strokeStyle = '#000'ctx.lineTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop)ctx.stroke()ctx.beginPath()ctx.moveTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop)}canvas.addEventListener('mousedown', startDrawing)canvas.addEventListener('mousemove', draw)canvas.addEventListener('mouseup', stopDrawing)canvas.addEventListener('mouseout', stopDrawing)});</script>
</body></html>

效果图
在这里插入图片描述

和上面效果相同,只是轨迹线换成了直线(鼠标移动始终显示两点直线,只能绘制有一条线)
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Canvas Drawing</title><style>canvas {border: 1px solid #000;}</style>
</head><body><canvas id="myCanvas" width="500" height="500"></canvas><script>document.addEventListener('DOMContentLoaded', function () {const canvas = document.getElementById('myCanvas')const ctx = canvas.getContext('2d')let isDrawing = falselet startX, startYfunction startDrawing (e) {isDrawing = truestartX = e.clientX - canvas.offsetLeftstartY = e.clientY - canvas.offsetTop}function drawLine (e) {if (!isDrawing) returnconst endX = e.clientX - canvas.offsetLeftconst endY = e.clientY - canvas.offsetTopctx.clearRect(0, 0, canvas.width, canvas.height) // Clear the canvasctx.lineWidth = 5ctx.lineCap = 'round'ctx.strokeStyle = '#000'ctx.beginPath()ctx.moveTo(startX, startY)ctx.lineTo(endX, endY)ctx.stroke()}function stopDrawing () {isDrawing = false}canvas.addEventListener('mousedown', startDrawing)canvas.addEventListener('mousemove', drawLine)canvas.addEventListener('mouseup', stopDrawing)canvas.addEventListener('mouseout', stopDrawing)});</script>
</body></html>

效果图
在这里插入图片描述

效果图和上面相同(可以画多条直线,点击确定按钮会保留最后画的一条线)
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Canvas Drawing</title><style>canvas {border: 1px solid #000;margin-bottom: 20px;}button {display: block;margin-top: 10px;}</style>
</head><body><canvas id="myCanvas" width="500" height="500"></canvas><button id="confirmButton">Confirm</button><script>document.addEventListener('DOMContentLoaded', function () {const canvas = document.getElementById('myCanvas')const ctx = canvas.getContext('2d')let lines = [] // 画线的数组let lines2 = [] // 点击确定后存放的按钮let num = 0let isDrawing = falselet startPoint = {}let endPoint = {}function startDrawing (e) {isDrawing = truestartPoint = {x: e.clientX - canvas.offsetLeft,y: e.clientY - canvas.offsetTop}}function drawLine (e) {if (!isDrawing) returnendPoint = {x: e.clientX - canvas.offsetLeft,y: e.clientY - canvas.offsetTop}ctx.clearRect(0, 0, canvas.width, canvas.height) // Clear the canvasctx.lineWidth = 5ctx.lineCap = 'round'ctx.strokeStyle = '#000'lines.forEach(line => {ctx.beginPath()ctx.moveTo(line.start.x, line.start.y)ctx.lineTo(line.end.x, line.end.y)ctx.stroke()})ctx.beginPath()ctx.moveTo(startPoint.x, startPoint.y)ctx.lineTo(endPoint.x, endPoint.y)ctx.stroke()}function stopDrawing () {if (isDrawing) {isDrawing = falselines.push({ start: { ...startPoint }, end: { ...endPoint } })}}function confirmLines () {lines2.push(lines[lines.length - 1])lines = [...lines2]ctx.clearRect(0, 0, canvas.width, canvas.height) // Clear the canvasif (lines2.length > 0) {lines2.forEach((item) => {const lastLine = itemctx.beginPath()ctx.moveTo(lastLine.start.x, lastLine.start.y)ctx.lineTo(lastLine.end.x, lastLine.end.y)ctx.stroke()})}}canvas.addEventListener('mousedown', startDrawing)canvas.addEventListener('mousemove', drawLine)canvas.addEventListener('mouseup', stopDrawing)canvas.addEventListener('mouseout', stopDrawing)const confirmButton = document.getElementById('confirmButton')confirmButton.addEventListener('click', confirmLines)});</script>
</body></html>

相关文章：

Canvas鼠标画线

鼠标按下开始画线,鼠标移动根据鼠标的轨迹去画,鼠标抬起停止画线 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0">…...

编程日记 2023/12/8 4:42:49

Docker 安装部署 Sentinel Dashboard

1、下载 jar 包 官方 jar 包下载地址&#xff1a;https://github.com/alibaba/Sentinel/releases 或者点击 链接 直接跳转到下载页 进入链接下载你需要的版本 下载完毕&#xff08;我这里统一放在一个sentinel目录内&#xff09; 2、编写 Dockerfile 文件&#xff08;这里我不…...

编程日记 2023/12/8 4:37:45

第21章网络通信

Internet 提供了大量有用的信息&#xff0c;很少有人能在接触过Internet后拒绝它的诱惑。计算机网络实现了多台计算机间的互联&#xff0c;使得它们彼此之间能够进行数据交流。网络应用程序就是在已连接的不同计算机上运行的程序&#xff0c;这些程序借助于网络协议&#xff0c…...

编程日记 2023/12/8 4:33:42

一、运行时数据区域

根据 《Java 虚拟机规范》的规定&#xff0c;Java 虚拟机所管理的内存将会包括以下截个运行时数据区域&#xff0c;如图所示。 1、程序计数器 程序计数器是一块较小的内存空间&#xff0c;它可以看做是当前线程所执行的字节码的行号指示器。在 Java 虚拟机的概念模型里&#x…...

编程日记 2023/12/8 4:30:38

OCR原理解析

目录 1.概述 2.应用场景 3.发展历史 4.基于传统算法的OCR技术原理 4.1 图像预处理 4.1.1 灰度化 4.1.2 二值化 4.1.3 去噪 4.1.4 倾斜检测与校正 4.1.4.2 轮廓矫正 4.1.5 透视矫正 4.2 版面分析 4.2.1 连通域检测文本 4.2.2 MSER检测文本 4.3 字符切割 4.3.1 连…...

编程日记 2023/12/8 4:27:34

使用com组件编辑word

一个普通的窗体应用&#xff0c;6个button using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.Forms; u…...

编程日记 2023/12/8 4:23:30

国产Euler（欧拉）系统安装docker

国产的真™难用呀 生态又差还不开源 血泪经验 解压Docker安装包。 tar zxf docker-19.03.10.tgz 将解压后目录中的文件移动到“/usr/bin”下。 cp docker/* /usr/bin配置docker.service文件。 编辑docker.service文件。 vim /usr/lib/systemd/system/docker.service添加以…...

编程日记 2023/12/8 4:22:30

Linux 进程控制

文章目录 进程创建进程终止进程结果wait函数waitpid函数status参数 进程替换进程替换原理进程替换函数 补充/拓展 进程创建 fork函数 #include <unistd.h>pid_t fork(void);函数返回值&#xff1a; 在父进程中&#xff0c;fork函数返回子进程的进程ID&#xff08;PID&…...

编程日记 2023/12/8 4:17:25

[ Linux Audio 篇 ] 音频开发入门基础知识

在短视频兴起的背景下&#xff0c;音视频开发越来越受到重视。接下来将为大家介绍音频开发者入门知识&#xff0c;帮助读者快速了解这个领域。 轻柔的音乐、程序员有节奏感的键盘声、嗡嗡的发动机、刺耳的手提钻……这些声音是如何产生的呢&#xff1f;又是如何传到我们耳中的…...

编程日记 2023/12/8 4:14:23

关于高校电子邮件系统开通双因素认证的经验分享-以清华大学为例

清华大学信息化技术中心 马云龙 作者简介： 马云龙，男，清华大学信息化技术中心高级工程师；Coremail管理员社区大咖嘉宾 深耕高校计算机网络/信息化/网络安全岗位20年，对大规模计算机网络及信息系统规划，开发/建设，运维有深刻体会。 目前，越来越多的高校/企业/政府机关…...

编程日记 2023/12/8 4:13:22

「Swift」类淘宝商品瀑布流展示

前言&#xff1a;需要做一个类似于淘宝商品页面的瀑布流展示 结构分析&#xff1a; ps&#xff1a;图片来源 思路分析&#xff1a; 该瀑布流主要还是基于UICollectionView进行展示&#xff0c;只是在cell展示的UICollectionViewFlowLayout需要进行相应调整和自定义&#xff…...

编程日记 2023/12/8 4:08:16

道可云会展元宇宙平台全新升级，打造3D沉浸式展会新模式

随着VR虚拟现实、人工智能、虚拟数字人等元宇宙技术的快速发展&#xff0c;各个行业正试图通过元宇宙技术寻求新的发展突破口&#xff0c;会展行业也不例外。会展作为经贸领域的重要产业形态&#xff0c;越来越多的企业和组织开始寻求通过元宇宙技术为展会赋能&#xff0c;以满…...

编程日记 2023/12/8 4:05:14

Ant Design Pro初始化报错

今天按照官网步骤初始化项目&#xff0c;第一次报错 fatal: unable to access https://github.com/ant-design/ant-design-pro/: SSL certificate problem: unable to get local issuer certificate 致命&#xff1a;无法访问https://github.com/ant-design/ant-design-pro/&…...

编程日记 2023/12/8 4:04:13

第16届中国R会议暨2023X-AGI大会开幕，和鲸科技分享ModelOps在数据科学平台中的实践与应用

11月25日&#xff0c;第 16 届中国 R 会议暨 2023 X-AGI 大会在在中国人民大学逸夫会堂拉开帷幕&#xff0c;本次会议由中国人民大学统计学院、中国人民大学应用统计科学研究中心、统计之都、原灵科技和中国商业统计学会人工智能分会&#xff08;筹&#xff09;主办&#xff0c…...

编程日记 2023/12/8 4:02:12

❀My学习Linux命令小记录（12）❀

目录 ❀My学习Linux命令小记录&#xff08;12&#xff09;❀ 46.arp指令 47.tcpdump指令 48.chmod指令 49.chown指令 50.bash调用脚本指令 shell介绍 shell脚本的组成部分 脚本执行方式 检查脚本语法 bash之变量 变量的种类&#xff1a;根据生效的范围不同来区分 …...

编程日记 2023/12/8 4:01:11

MySQL学习day05

DCL&#xff08;Data Control Language&#xff09;数据控制语言学习 作用&#xff1a;用来创建数据库用户、控制数据库的访问权限 1&#xff09;查询用户&#xff1a; use mysql; select * from user; 2&#xff09;创建用户&#xff1a; create user 用户名主机名 identifi…...

编程日记 2023/12/8 3:57:07

JAVA面试题7

1.Java中的ClassLoader是什么&#xff1f; 它有什么作用&#xff1f; 答案&#xff1a;ClassLoader是一种加载Java类文件的机制&#xff0c;可以从不同的来源加载类文件&#xff0c;如本地文件系统、网络等。ClassLoader可以帮助实现模块化开发和动态加载类等功能。 2.什么是J…...

编程日记 2023/12/8 3:56:05

好用免费的AI换脸5个工具

在当今社会的发展中&#xff0c;人工智能&#xff08;Artificial Intelligence, AI&#xff09;扮演着关键的角色&#xff0c;其应用领域不断扩展。作为AI的一个分支&#xff0c;换脸技术近年来备受欢迎。这项技术使得将一个人的面部特征迁移到另一个人的照片或视频成为可能。除…...

编程日记 2023/12/8 3:54:03

【Linux】公网远程访问AMH服务器管理面板

目录 1. Linux 安装AMH 面板2. 本地访问AMH 面板3. Linux安装Cpolar4. 配置AMH面板公网地址5. 远程访问AMH面板6. 固定AMH面板公网地址 AMH 是一款基于 Linux 系统的服务器管理面板&#xff0c;它提供了一系列的功能&#xff0c;包括网站管理、FTP 管理、数据库管理、DNS 管理、…...

编程日记 2023/12/8 3:51:00

随笔-这都是命吗

我与鹏哥、小付有个小群&#xff0c;前几天&#xff0c;鹏哥在群里发了一个图&#xff0c;是他那个城市准备扶持的高新产业&#xff0c;有元宇宙、量子信息、生物制药、人工智能什么的。 先前的时候鹏哥给我说过&#xff0c;当地准备了六百多亩地&#xff0c;准备发展高新产业…...

编程日记 2023/12/8 3:47:58

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明&#xff1a;假设每台服务器已…...

编程新知 2026/2/10 11:45:58

未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

编程新知 2026/2/7 23:18:28

【Linux】shell脚本忽略错误继续执行

在 shell 脚本中&#xff0c;可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行&#xff0c;可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令&#xff0c;并忽略错误 rm somefile…...

编程新知 2025/9/11 15:27:32

CTF show Web 红包题第六弹

提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框&#xff0c;很难让人不联想到SQL注入&#xff0c;但提示都说了不是SQL注入&#xff0c;所以就不往这方面想了 ​ 先查看一下网页源码&#xff0c;发现一段JavaScript代码&#xff0c;有一个关键类ctfs…...

编程新知 2026/2/5 4:33:58

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

编程新知 2026/1/24 15:08:45

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

编程新知 2026/2/3 15:24:36

浅谈不同二分算法的查找情况

二分算法原理比较简单&#xff0c;但是实际的算法模板却有很多&#xff0c;这一切都源于二分查找问题中的复杂情况和二分算法的边界处理&#xff0c;以下是博主对一些二分算法查找的情况分析。 需要说明的是&#xff0c;以下二分算法都是基于有序序列为升序有序的情况&#xf…...

编程新知 2025/9/14 7:37:32

HashMap中的put方法执行流程（流程图）

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中&#xff0c;其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下&#xff1a; 初始判断与哈希计算&#xff1a; 首先&#xff0c;putVal 方法会检查当前的 table&#xff08;也就…...

编程新知 2026/2/8 3:32:52

动态 Web 开发技术入门篇

一、HTTP 协议核心 1.1 HTTP 基础 协议全称 &#xff1a;HyperText Transfer Protocol&#xff08;超文本传输协议&#xff09; 默认端口 &#xff1a;HTTP 使用 80 端口&#xff0c;HTTPS 使用 443 端口。 请求方法 &#xff1a; GET &#xff1a;用于获取资源&#xff0c;…...

编程新知 2025/10/3 0:42:17

在Mathematica中实现Newton-Raphson迭代的收敛时间算法（一般三次多项式）

考察一般的三次多项式&#xff0c;以r为参数&#xff1a; p[z_, r_] : z^3 (r - 1) z - r; roots[r_] : z /. Solve[p[z, r] 0, z]&#xff1b; 此多项式的根为&#xff1a; 尽管看起来这个多项式是特殊的&#xff0c;其实一般的三次多项式都是可以通过线性变换化为这个形式…...

编程新知 2026/1/30 3:24:00