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] 存…

单例模式析构时持久化

#include <iostream> #include <fstream> class Singleton { private: // 私有构造函数和拷贝构造函数/赋值运算符&#xff0c;确保单例 Singleton() { // 构造函数中的初始化代码 std::cout << "Singleton created\n"; } ~Singleton()…

用最简单的示例去理解:Dijkstra最短路径算法

Dijkstra算法是一种用于解决单源最短路径问题的经典算法&#xff0c;它能够计算出从单个源节点到图中所有其他节点的最短路径。 以下是Dijkstra算法的基本步骤&#xff1a; 初始化&#xff1a;将起始节点的距离设置为0&#xff0c;将所有其他节点的距离设置为无穷大&#xff0…

如何在您的域名中使用 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;在知…

echarts饼图渲染

在Vue中使用ECharts渲染饼图&#xff0c;你可以遵循以下步骤&#xff1a; 1. **安装ECharts**&#xff1a; 在你的Vue项目中&#xff0c;首先需要通过npm或yarn来安装ECharts。 npm install echarts --save 或者 yarn add echarts 2. **引入ECharts**&#xff1a; 在你的Vue组…

Spring中的FileCopyUtils:文件复制的利器与详解

1. 概述 在Spring框架中&#xff0c;FileCopyUtils是一个用于文件复制操作的实用工具类。它提供了一系列静态方法&#xff0c;简化了文件从输入流到输出流、从文件到文件等的复制过程。这些方法都基于NIO&#xff08;New I/O&#xff09;技术&#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 录制文件:查看

不使用EF框架实现数据库增删改查

创建一个通用的数据访问层 (DAL) 类&#xff0c;让所有需要操作数据库的 DAL 类都继承这个基类&#xff0c;以实现通用的增删改查方法。下面是一个简单的示例展示如何实现这样的通用基类&#xff1a; public class BaseDal<T> where T : class {protected string connec…

【算法训练 day22 最大二叉树、合并二叉树、二叉搜索树的搜索、验证二叉搜索树】

目录 一、最大二叉树-LeetCode 654思路 二、合并二叉树-LeetCode 617思路 三.二叉搜索树的搜索-LeeCode 700思路 四.验证二叉搜索树-LeeCode 98思路 一、最大二叉树-LeetCode 654 思路 本题还是对数组进行切割&#xff0c;然后建立二叉树&#xff0c;递归方式自然是先序遍历。…