Canvas实现画板

Canvas如何实现画板功能。
在这里插入图片描述

<!DOCTYPE html>
<html>
<head><title>Canvas 画板</title><style>canvas {border: 1px solid black;}</style>
</head>
<body><canvas id="canvas" width="800" height="600"></canvas><button id="clear-button">clear-button</button><script>// 获取 Canvas 元素和上下文var canvas = document.getElementById('canvas');var context = canvas.getContext('2d');// 设置画笔初始状态var isDrawing = false; // 是否正在画线var isErasing = false; // 是否正在擦除var lastX = 0; // 上一个点的 X 坐标var lastY = 0; // 上一个点的 Y 坐标// 监听鼠标按下事件canvas.addEventListener('mousedown', startDrawing);// 监听鼠标移动事件canvas.addEventListener('mousemove', draw);// 监听鼠标松开事件canvas.addEventListener('mouseup', stopDrawing);// 监听鼠标离开画布事件canvas.addEventListener('mouseleave', stopDrawing);// 监听触摸屏按下事件canvas.addEventListener('touchstart', startDrawing);// 监听触摸屏移动事件canvas.addEventListener('touchmove', draw);// 监听触摸屏松开事件canvas.addEventListener('touchend', stopDrawing);// 开始绘制function startDrawing(e) {isDrawing = true;[lastX, lastY] = [e.clientX || e.touches[0].clientX, e.clientY || e.touches[0].clientY];}// 绘制线条或擦除function draw(e) {if (!isDrawing) return;var newX = e.clientX || e.touches[0].clientX;var newY = e.clientY || e.touches[0].clientY;if (isErasing) {context.clearRect(newX - 10, newY - 10, 20, 20); // 使用橡皮擦大小为 20x20 的矩形来清除画布上的内容} else {context.beginPath();context.moveTo(lastX, lastY);context.lineTo(newX, newY);context.stroke();[lastX, lastY] = [newX, newY];}}// 停止绘制function stopDrawing() {isDrawing = false;}// 监听清除按钮点击事件var clearButton = document.getElementById('clear-button');clearButton.addEventListener('click', clearCanvas);// 清除画布function clearCanvas() {context.clearRect(0, 0, canvas.width, canvas.height);}</script>
</body>
</html>

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

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

相关文章

第41天:WEB攻防-ASP应用HTTP.SYS短文件文件解析Access注入数据库泄漏

第四十一天 一、ASP-SQL注入-Access数据库 1.解释 ACCESS数据库无管理帐号密码&#xff0c;顶级架构为表名&#xff0c;列名&#xff08;字段&#xff09;&#xff0c;数据&#xff0c;所以在注入猜解中一般采用字典猜解表和列再获取数据&#xff0c;猜解简单但又可能出现猜解…

flask和django的对比

文章目录 1. 简介2. 安装和设置3. 路由和视图4. ORM5. 管理界面6. 社区和文档7. 性能结论 当涉及构建 Web 应用程序时&#xff0c;Flask 和 Django 是两个最受欢迎的 Python Web 框架之一。它们都提供了强大的工具和功能&#xff0c;但在某些方面却有所不同。本文将对 Flask 和…

Vue-路由介绍

目录 一、思考引入 二、路由介绍 一、思考引入 单页面应用程序&#xff0c;之所以开发效率高&#xff0c;性能高&#xff0c;用户体验好&#xff0c;是因为页面按需更新。 而如果要按需更新&#xff0c;首先需要明确&#xff1a;访问路径和组件的对应关系。该关系通过路由来…

microsoft的azure语音,开发环境运行正常,发布到centos7线上服务器之后,无法运行

最近在做AI语音对话的功能&#xff0c;用到了azure的语音语音服务&#xff0c;开发的时候还算顺利&#xff0c;部署到线上后&#xff0c;发现在正式服上无法完成语音转文本的操作&#xff0c;提示&#xff1a; org.springframework.web.util.NestedServletException: Handler d…

数字图像处理知识点

数字图像处理知识点 一、绪论1、数字图像处理相关概念2、数字图像处理流程1.3 数字图像处理主要研究内容二、视觉与色度基础1、图像传感器与二维成像原理2、三基色2.1 三基色原理2.2 亮度方程3、HSI模型3.1 HSI模型优点3.2 RGB到HSI转换三、数字图像处理基础1、图像的数字化及表…

linux Shell编程之条件语句

条件测试操作 test命令 条件测试操作 Shell环境根据命令执行后的返回状态值&#xff08;$?&#xff09;来判断是否执行成功&#xff0c;当返回值为0&#xff08;真true&#xff09;时表示成功&#xff0c;返回值为非0值&#xff08;假false&#xff09;时表示失败或异常。 t…

C++ | Leetcode C++题解之第77题组合

题目&#xff1a; 题解&#xff1a; class Solution { public:vector<int> temp;vector<vector<int>> ans;vector<vector<int>> combine(int n, int k) {// 初始化// 将 temp 中 [0, k - 1] 每个位置 i 设置为 i 1&#xff0c;即 [0, k - 1] 存…

如何在您的域名中使用 Google Apps 创建 SPF 记录

关于 SPF 记录 SPF 记录是一种域名服务&#xff08;DNS&#xff09;记录&#xff0c;用于标识哪些邮件服务器被允许代表您的域发送电子邮件。它与在您的 DNS 区域中添加 MX 或 A 记录一样简单。 为什么它很重要&#xff1f; 如今&#xff0c;几乎所有滥用电子邮件消息都携带…

OpenSPG docker 安装教程

文章目录 前言自述 一、OpenSPG1.介绍 二、安装步骤1.安装服务端2.客户端部署 前言 自述 我最近是想结合chatglm3-6b和知识图谱做一个垂直领域的技术规范的问答系统&#xff0c;过程中也遇到了很多困难&#xff0c;在模型微调上&#xff0c;在数据集收集整理上&#xff0c;在知…

面向侧扫声纳目标检测的YOLOX-ViT知识精馏

面向侧扫声纳目标检测的YOLOX-ViT知识精馏 摘要IntroductionRelated WorkYOLOv-ViTKnowledge DistillationExperimental Evaluation Knowledge Distillation in YOLOX-ViT for Side-Scan Sonar Object Detection 摘要 在本文中&#xff0c;作者提出了YOLOX-ViT这一新型目标检测…

Sealos急速部署生产用k8s集群

最近一段时间部署k8s全部使用sealos了&#xff0c;整体使用感觉良好&#xff0c;基本没有什么坑。推荐给大家。 使用 Sealos&#xff0c;可以安装一个不包含任何组件的裸 Kubernetes 集群。 最大的好处是提供 99 年证书&#xff0c;用到我跑路是足够了。不用像之前kubeadm安装…

【6D位姿估计】FoundationPose 支持6D位姿估计和跟踪 CVPR 2024

前言 本文介绍6D位姿估计的方法FoundationPose&#xff0c;是CVPR 2024的满分论文&#xff0c;支持6D位姿估计和跟踪。 通过大规模的合成数据训练&#xff0c;具有强大的泛化能力&#xff0c;在测试新物体时&#xff0c;无需进行微调。 论文地址&#xff1a;FoundationPose:…

1688数据分析实操技巧||1688商品数据采集接口 数据分析

今天&#xff0c;聊一聊B2B平台的数据分析&#xff0c;以1688国内站为例。 1688平台数据接口 1688也属于阿里巴巴的体系&#xff0c;跟淘宝天猫运营很像&#xff0c;因此很多淘宝天猫的玩法调整后也适用于1688。数据分析也是如此。 在1688搞数据分析&#xff0c;搞数据化运营可…

绘唐3 零基础系列教程

绘唐3 团长董事长,即可下载工具 第一讲:安装注册 日期:2024-04-01 17:50:10 录制文件:查看 第二讲:SD,MJ出图配置演示出图 日期:2024-04-01 18:06:46 录制文件:查看

【笔试训练】day22

1.添加字符 求最少不相等的位数&#xff0c;可以先求最多相等的位数。 在添加字符之前&#xff0c;A和B最多相等的位数是多少&#xff1f;由于A后面可以添加字符&#xff0c;也就使得A字符可以在B的任意一个位置开始比较。遍历一遍这个比较的起点&#xff0c;从这个起点开始跟…

Linux中的简单操作 ls/tar/pwd/cd/mkdir/touch 等

目录 前言 安装和卸载软件包 ls 查看指定路径下的文件和文件夹 tar 解压缩/压缩命令 pwd 查看当前路径 cd 改变目录 mkdir 创建目录 递归创建 rm rmdir 删除文件或目录 touch 创建文件 ll、echo、重定向符&#xff08;>,>>&#xff09; ll echo 重定向符…

SQL查询语句(四)模糊查询

前文介绍的查询语句&#xff0c;无论是利用常规的数学运算符&#xff0c;还是IN&#xff0c;BETWEEN和EXISTS等范围查询关键字&#xff0c;本质上都属于精确查询的范围&#xff0c;也就是说&#xff0c;我们在条件中写明了完全限定死的条件。而有些场景&#xff0c;我们的条件并…

安全继电器的使用和作用

目录 一、什么是安全继电器 二、安全继电器的接线方式 三、注意事项 四、总结 一、什么是安全继电器 安全继电器是由多个继电器与硬件电路组合而成的一种模块&#xff0c;是一种电路组成单元&#xff0c;其目的是要提高安全因素。完整点说&#xff0c;应该叫成安全继电器模…

【JavaEE网络】HTTP响应详解:状态码、报头与正文的全面解析

目录 HTTP响应&#xff08;Response&#xff09;认识 "状态码" (status code)认识响应 “报头”&#xff08;header&#xff09;认识响应 “正文”&#xff08;body&#xff09; HTTP响应&#xff08;Response&#xff09; 响应&#xff1a; 首行响应头空行正文 认…

【线性代数】俗说矩阵听课笔记

基础解系的概念 31线性相关&#xff0c;线性无关&#xff0c;拓展与证明 n个m维向量在n<m时可能线性相关也可能线性无关&#xff0c;线性无关时可以构成某个m维空间的一组基。m不小于n时&#xff0c;秩小于n则线性相关。 n个m维向量在n>m时可一定线性相关。低维向量一定…