html+canvas 实现签名功能-手机触摸

手机上的效果图

image

需要注意,手机触摸和鼠标不是一个事件,不能通用,上一篇是关于使用鼠标的样例

相关代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.buttons {margin-top: 10px;}</style>
</head><body><div><canvas id="signatureCanvas" width="500" height="200" style="border:solid;"></canvas><button onclick="clearSignature()">清除</button><button onclick="undoLast()">清除上一步</button><button onclick="saveSignature()">保存</button></div><script>const canvas = document.getElementById('signatureCanvas');const ctx = canvas.getContext('2d');let isDrawing = false;let lastX, lastY;let strokes = []; // 用于存储每一步的绘制操作// 触摸开始事件function handleTouchStart(e) {e.preventDefault(); // 阻止默认的触摸事件isDrawing = true;[lastX, lastY] = [e.touches[0].clientX - canvas.offsetLeft, e.touches[0].clientY - canvas.offsetTop];strokes.push([]); // 开始新的笔画}// 触摸移动事件function handleTouchMove(e) {e.preventDefault(); // 阻止默认的触摸事件if (!isDrawing) return; // 如果没有触摸,则退出函数const x = e.touches[0].clientX - canvas.offsetLeft;const y = e.touches[0].clientY - canvas.offsetTop;ctx.beginPath();ctx.moveTo(lastX, lastY);ctx.lineTo(x, y);ctx.stroke();strokes[strokes.length - 1].push({ x: lastX, y: lastY, x2: x, y2: y }); // 记录当前笔画[lastX, lastY] = [x, y];}// 触摸结束事件function handleTouchEnd(e) {e.preventDefault(); // 阻止默认的触摸事件isDrawing = false;}// 清除签名function clearSignature() {ctx.clearRect(0, 0, canvas.width, canvas.height);strokes = []; // 清空所有笔画记录}// 撤销上一步function undoLast() {strokes.pop(); // 移除最后一个笔画redraw(); // 重新绘制画布}// 重新绘制画布function redraw() {ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布strokes.forEach(stroke => {stroke.forEach(line => {ctx.beginPath();ctx.moveTo(line.x, line.y);ctx.lineTo(line.x2, line.y2);ctx.stroke();});});}// 保存签名function saveSignature() {const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);// 将图片数据转换成 base64 格式const base64ImageData = canvas.toDataURL();console.log(base64ImageData);}// 绑定事件canvas.addEventListener('touchstart', handleTouchStart);canvas.addEventListener('touchmove', handleTouchMove);canvas.addEventListener('touchend', handleTouchEnd);canvas.addEventListener('touchcancel', handleTouchEnd);</script>
</body></html>

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

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

相关文章

Large Language Model系列之一:语言模型与表征学习(Language Models and Representation Learning)

语言模型与表征学习&#xff08;Language Models and Representation Learning&#xff09; 1 语言模型 N-Gram模型 from collections import defaultdictsentences [The swift fox jumps over the lazy dog.,The swift river flows under the ancient bridge.,The swift br…

Java关于JDBC的理解

JDBC Java Database Connectivity&#xff1a;意为Java数据库连接。是Java提供的一组独立于任何数据库管理系统的API。Java提供接口规范&#xff0c;由各个数据库厂商提供接口的实现&#xff0c;厂商提供的实现类封装成jar文件&#xff0c;也就是我们俗称的数据库驱动jar包。我…

PyTorch张量数值计算

文章目录 1、张量基本运算2、阿达玛积3、点积运算4、指定运算设备⭐5、解决在GPU运行PyTorch的问题 &#x1f343;作者介绍&#xff1a;双非本科大三网络工程专业在读&#xff0c;阿里云专家博主&#xff0c;专注于Java领域学习&#xff0c;擅长web应用开发、数据结构和算法&am…

LDR6020:重塑iPad一体式有线键盘体验的创新力量

在移动办公与娱乐日益融合的时代&#xff0c;iPad凭借其强大的性能和便携性&#xff0c;成为了众多用户不可或缺的生产力工具。然而&#xff0c;为了进一步提升iPad的使用体验&#xff0c;一款高效、便捷的键盘成为了不可或缺的配件。今天&#xff0c;我们要介绍的&#xff0c;…

云计算复习--虚拟化技术

文章目录 虚拟化技术定义与原理虚拟机监视器&#xff08;VMM&#xff09;虚拟化技术服务器虚拟化存储虚拟化网络虚拟化应用虚拟化 关键技术新型虚拟化技术发展进展作业 虚拟化技术定义与原理 定义&#xff1a;虚拟化技术是一种将计算机物理实体&#xff08;如服务器、存储设备…

【BUG】已解决:OSError: [Errno 22] Invalid argument

已解决&#xff1a;OSError: [Errno 22] Invalid argument 目录 已解决&#xff1a;OSError: [Errno 22] Invalid argument 【常见模块错误】 错误原因&#xff1a; 解决方法如下&#xff1a; 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 欢迎来到我的主页&…

利用AI辅助制作ppt封面

如何利用AI辅助制作一个炫酷的PPT封面 标题使用镂空字背景替换为动态视频 标题使用镂空字 1.首先&#xff0c;新建一个空白的ppt页面&#xff0c;插入一张你认为符合主题的图片&#xff0c;占满整个可视页面。 2.其次&#xff0c;插入一个矩形&#xff0c;右键选择设置形状格式…

贝锐蒲公英远程运维方案:即装即用、无需专线,断网也可远程维护

目前&#xff0c;公路、隧道、桥梁、航道&#xff0c;甚至是施工现场和工业生产环境等&#xff0c;都采用了实时监测方案。 通过部署各类传感器和摄像头等设备&#xff0c;现场视频画面和控制单元&#xff08;如PLC、工控机等&#xff09;数据可以实时回传&#xff0c;用于集中…

智能优化算法之灰狼优化算法(GWO)

智能优化算法是一类基于自然界中生物、物理或社会现象的优化技术。这些算法通过模拟自然界中的一些智能行为&#xff0c;如遗传学、蚁群觅食、粒子群体运动等&#xff0c;来解决复杂的优化问题。智能优化算法广泛应用于各种工程和科学领域&#xff0c;因其具有全局搜索能力、鲁…

蚂蚁集团推出EchoMimic:能通过音频和面部标志生成逼真的肖像动画视频

蚂蚁集团最近推出了一项名为EchoMimic的新技术。能通过音频和面部标志生成逼真的肖像动画视频&#xff0c;让你的声音和面部动作被完美复制到视频中&#xff0c;效果自然如照镜子。 EchoMimic不仅可以单独使用音频或面部标志点生成肖像视频&#xff0c;也可以将两者结合&#…

【C++】16. set 和 map

在之前的博客中&#xff0c;我们已经接触过STL中的部分容器&#xff0c;比如&#xff1a;vector、list、deque等&#xff0c;这些容器统称为序列式容器&#xff0c;因为其底层为线性序列的数据结构&#xff0c;里面存储的是元素本身。 我们这篇博客的内容是关联式容器&#xff…

在 Windows 上开发.NET MAUI 应用_1.安装开发环境

开发跨平台的本机 .NET Multi-platform App UI (.NET MAUI) 应用需要 Visual Studio 2022 17.8 或更高版本&#xff0c;或者具有 .NET MAUI 扩展的最新 Visual Studio Code。要开始在 Windows 上开发本机跨平台 .NET MAUI 应用&#xff0c;请按照安装步骤安装 Visual Studio 20…

对称加密与非对称加密

对称加密 对称加密指的是加密和解密使用同一个秘钥,所以叫对称加密。对称加密只有一个秘钥,称为私钥。 优点:算法公开、计算量小、加密速度快、效率高 缺点:数据传输前,发送方和接收方必须确定好秘钥,双方也必须要保存好秘钥。 常见对称加密算法: DES、3DES、AES、3…

【论文共读】【翻译】ShuffleNet v1:一种用于移动设备的极其高效的卷积神经网络

[原文地址] https://arxiv.org/pdf/1707.01083 [翻译] 0. 摘要 我们介绍了一种计算效率极高的CNN架构&#xff0c;称为ShuffleNet&#xff0c;该架构专为计算能力非常有限的移动设备&#xff08;例如&#xff0c;10-150 MFLOPs&#xff09;而设计。新架构利用了两个新操作&am…

STM32 CAN外设(基于STMF103C8T6)

STM32内置bxCAN外设&#xff08;CAN控制器)&#xff0c;支持CAN2.0A和2.0B&#xff0c;可以自动发送CAN报文和按照过滤器自动接收指定CAN报文&#xff0c;程序只需处理报文数据而无需关注总线的电平细节 波特率最高可达1兆位/秒3个可配置优先级的发送邮箱2个3级深度的接…

AI算法24-决策树C4.5算法

目录 决策树C4.5算法概述 决策树C4.5算法简介 决策树C4.5算法发展历史 决策树C4.5算法原理 信息熵&#xff08;Information Entropy&#xff09; 信息增益&#xff08;Information Gain&#xff09; 信息增益比&#xff08;Gain Ratio&#xff09; 决策树C4.5算法改进 …

【笔记:3D航路规划算法】一、随机搜索锚点(python实现,讲解思路)

目录 关键概念3D路径规划算法1. A*算法2. 快速随机锚点1. 初始化&#xff1a;2. 实例化搜索算法&#xff1a;3. 路径生成&#xff1a;4. 绘制图像&#xff1a; 3D路径规划是在三维空间中寻找从起点到终点的最短或最优路径的一种技术。它广泛应用于无人机导航、机器人运动规划、…

我去,怎么http全变https了

项目场景&#xff1a; 在公司做的一个某地可视化项目。 部署采用的是前后端分离部署&#xff0c;图片等静态资源请求一台minio服务器。 项目平台用的是http 图片资源的服务器用的是https 问题描述 在以https请求图片资源时&#xff0c;图片请求成功报200。 【现象1】: 继图…

阿里云DSW实例中安装并运行Neo4J

想尝试使用大模型对接Neo4J&#xff0c;在阿里云DSW实例中安装了Neo4J&#xff0c;却无法通过本地浏览器访问在DSW实例中运行的Neo4J。尝试了改neo4j.conf文件&#xff0c;以及添加专用网络的公共IP地址等方法&#xff0c;均没有成功。最后决定直接在服务器的命令行进行各种Cyp…

K8S私有云裸金属服务器负载均衡器OpenELB——筑梦之路

OpenELB介绍 OpenELB 是一个专为裸机 Kubernetes 集群设计的开源负载均衡器实现。 在云服务环境中的 Kubernetes 集群里&#xff0c;通常可以用云服务提供商提供的负载均衡服务来暴露 Service&#xff0c;但是在本地没办法这样操作。而 OpenELB 可以让用户在裸金属服务器、边缘…