前端使用Canvas实现网页电子签名(兼容移动端和PC端)
实现效果：
要使用Canvas实现移动端网页电子签名，可以按照以下步骤：
在HTML文件中创建一个Canvas元素，并设置其宽度和高度，以适配移动设备的屏幕大小。
// 创建一个canvas元素
let canvas = document.createElement("canvas");
// 设置canvas元素的宽度和高度
canvas.width = 300;
canvas.height = 200;在JavaScript文件中获取Canvas元素，并获取其上下文对象。
let ctx = canvas.getContext('2d');
设置绘制路径的样式，包括颜色、宽度等。
ctx.strokeStyle = '#000000'; // 设置绘制线条的颜色为黑色
ctx.lineWidth = 2; // 设置绘制线条的宽度为2像素
监听移动设备的触摸事件，在触摸事件的回调函数中获取触摸点的坐标，并使用Canvas绘制路径。
var isDrawing = false; // 是否正在绘制路径canvas.addEventListener('touchstart', function(e) {isDrawing = true;var touch = e.touches[0];var x = touch.pageX - canvas.offsetLeft;var y = touch.pageY - canvas.offsetTop;ctx.beginPath(); // 开始绘制路径ctx.moveTo(x, y); // 移动到起始点
});canvas.addEventListener('touchmove', function(e) {if (isDrawing) {var touch = e.touches[0];var x = touch.pageX - canvas.offsetLeft;var y = touch.pageY - canvas.offsetTop;ctx.lineTo(x, y); // 绘制直线到当前点ctx.stroke(); // 绘制路径}
});canvas.addEventListener('touchend', function(e) {isDrawing = false;
});
可以添加其他功能，如清除画布、保存签名等。
const startDrawing = (e) => {isDrawing = true;const { clientX, clientY } = e.touches ? e.touches[0] : e;const x = clientX - canvas.offsetLeft;const y = clientY - canvas.offsetTop;ctx.beginPath(); // 开始绘制路径ctx.moveTo(x, y); // 移动到起始点
};const draw = (e) => {if (isDrawing) {const { clientX, clientY } = e.touches ? e.touches[0] : e;const x = clientX - canvas.offsetLeft;const y = clientY - canvas.offsetTop;ctx.lineTo(x, y); // 绘制直线到当前点ctx.stroke(); // 绘制路径}
};const stopDrawing = () => {isDrawing = false;
};// 添加触摸事件
canvas.addEventListener("touchstart", startDrawing);
canvas.addEventListener("touchmove", draw);
canvas.addEventListener("touchend", stopDrawing);// 添加鼠标事件
canvas.addEventListener("mousedown", startDrawing);
canvas.addEventListener("mousemove", draw);
canvas.addEventListener("mouseup", stopDrawing);以上就是使用Canvas实现移动端网页电子签名的基本步骤。你可以根据自己的需求进行进一步的扩展和优化。
下面给出完整代码：
<!DOCTYPE html>
<html><head><title>Canvas头像</title></head><body><button onclick="saveSignature()">保存</button><button onclick="clearCanvas()">清除</button><script>let canvas = null;let ctx = null;let isDrawing = false; // 是否正在绘制路径(function initCanvas() {// 创建一个canvas元素canvas = document.createElement("canvas");// 设置canvas元素的宽度和高度canvas.width = 300;canvas.height = 200;// 将canvas元素添加到body元素中document.body.appendChild(canvas);// 获取canvas元素的上下文对象ctx = canvas.getContext("2d");ctx.strokeStyle = "#000000"; // 设置绘制线条的颜色为黑色ctx.lineWidth = 2; // 设置绘制线条的宽度为2像素const startDrawing = (e) => {isDrawing = true;const { clientX, clientY } = e.touches ? e.touches[0] : e;const x = clientX - canvas.offsetLeft;const y = clientY - canvas.offsetTop;ctx.beginPath(); // 开始绘制路径ctx.moveTo(x, y); // 移动到起始点};const draw = (e) => {if (isDrawing) {const { clientX, clientY } = e.touches ? e.touches[0] : e;const x = clientX - canvas.offsetLeft;const y = clientY - canvas.offsetTop;ctx.lineTo(x, y); // 绘制直线到当前点ctx.stroke(); // 绘制路径}};const stopDrawing = () => {isDrawing = false;};// 添加触摸事件canvas.addEventListener("touchstart", startDrawing);canvas.addEventListener("touchmove", draw);canvas.addEventListener("touchend", stopDrawing);// 添加鼠标事件canvas.addEventListener("mousedown", startDrawing);canvas.addEventListener("mousemove", draw);canvas.addEventListener("mouseup", stopDrawing);})();// 清除画布function clearCanvas() {ctx.clearRect(0, 0, canvas.width, canvas.height);}// 保存签名为图片function saveSignature() {const imageData = canvas.toDataURL(); // 将Canvas内容转换为图片数据const link = document.createElement("a");link.href = imageData;link.download = "signature.png"; // 设置下载图片的文件名link.click(); // 模拟点击下载链接}</script></body>
</html>
相关文章：
前端使用Canvas实现网页电子签名(兼容移动端和PC端)
实现效果： 要使用Canvas实现移动端网页电子签名，可以按照以下步骤： 在HTML文件中创建一个Canvas元素，并设置其宽度和高度，以适配移动设备的屏幕大小。 // 创建一个canvas元素 let canvas document.createElement(&q…...
什么是OSTRPT报文？
OSTRPT（Order Status Report）是一种 EDI（电子数据交换）报文，用于在供应链管理中向采购商报告订单状态。这种报文通常由供应商发送给采购商，目的是告知订单的当前处理状态、预期交货时间、订单中的变化等信息…...
PICO+Unity MR空间锚点
官方链接：空间锚点 | PICO 开发者平台 注意：该功能只能打包成APK在PICO 4 Ultra上真机运行，无法通过串流或PICO developer center在PC上运行。使用之前要开启视频透视。 在 Inspector 窗口中的 PXR_Manager (Script) 面板上，勾选…...
electron 中 contextBridge 作用
1. 安全地实现渲染进程和主进程之间的通信 在 Electron 应用中，主进程和渲染进程是相互隔离的，这是为了安全和稳定性考虑。 然而，在很多情况下，渲染进程需要访问主进程中的某些功能，例如系统级别的操作或者一些应用级…...
15分钟学 Go 第 42 天：RESTful API设计
第42天：RESTful API设计 目标：理解RESTful API的设计原则 在现代Web开发中，RESTful API（Representational State Transfer）已经成为了标准的架构风格，用于实现客户端与服务器之间的通信。通过遵循REST的设…...
如何安全的中断一个运行中的线程？
文心快码进入3.0时代， 最新发布的代码问答、编码、Debug、单测、安全智能体， 分别在开发的设计、编码、构建、测试验证全流程通过AI赋能，让效率更高、效果更好。可以通过自然语言对话，独立为你完成一项编码任务。 👉点…...
【121. 买卖股票的最佳时机】——贪心算法/动态规划
121. 买卖股票的最佳时机 一、题目难度 简单 三、题目描述 给定一个数组 prices，它的第 i 个元素 prices[i] 表示一支给定股票第 i 天的价格。 你只能选择某一天买入这只股票，并选择在未来的某一个不同的日子卖出该股票。设计一个算法来计算你所能获…...
LLMs之Calculate：利用大语言模型技术基于文本内容实现数字计算能力的简介、常用方法、代码实现之详细攻略
LLMs之Calculate：利用大语言模型技术基于文本内容实现数字计算能力的简介、常用方法、代码实现之详细攻略 导读：在基于大语言模型（LLM）技术实现数字计算能力的背景下，文本内容的理解和计算过程涉及多个领域的交叉技术，包括自然语言处理（NLP）、机器学习、以及数值计算。…...
LeetCode题练习与总结：判断子序列--392
一、题目描述 给定字符串 s 和 t ，判断 s 是否为 t 的子序列。 字符串的一个子序列是原始字符串删除一些（也可以不删除）字符而不改变剩余字符相对位置形成的新字符串。（例如，"ace"是"abcde"的一…...
json数据结构的转换
# json可用于赌徒与原件数据的转换（json以字符串的形式储存数据，在通过json进行两种语言的转换时，应先将数据类型转换成列表或字典，再由列表或字典转换成json字符串，最后由json字符串转换成另一种语言的列表或字典数据…...
讲解)
mysql删除语句：@Update(“TRUNCATE TABLE employee“)讲解
这个 SQL 语句： TRUNCATE TABLE employee是一个 SQL DDL（数据定义语言） 操作，用于清空数据库表中的所有记录，但不会删除表结构（即列和索引等）。 逐部分解释： TRUNCATE：…...
如何修改浏览器指纹？
网络安全日益重要，我们的上网行为变得越来越容易被追踪和分析。其中，浏览器指纹就是一种强大的技术手段，它可以说是你上网的身份象征。 一、浏览器指纹是什么 浏览器指纹是网站和在线平台用来收集关于你的浏览器、设备和网络的详细信息的一…...
实现3D热力图
实现思路 首先是需要用canvas绘制一个2D的热力图，如果你还不会，请看json绘制热力图。使用Threejs中的canvas贴图，将贴图贴在PlaneGeometry平面上。使用着色器材质，更具json中的数据让平面模型 拔地而起。使用Threejs内置的TWEEN&…...
GEE ui界面实现：用户自画多边形， 按面积比例在多边形中自动生成样点，导出多边形和样点shp，以及删除上一组多边形和样点（有视频效果展示）
零、背景 这几天在选样点，发现GEE有强大的ui功能，于是应用在我的工作上。 下述代码实现了几个功能： ①用户可以自己勾勒多边形，随后程序会按面积比例在多边形中自动生成样点，同时根据改多边形的区域生成区域平均月N…...
React diff算法和Vue diff算法的主要区别
React和Vue都是流行的前端框架，它们各自实现了diff算法来优化虚拟DOM的更新过程。以下是React diff算法和Vue diff算法的主要区别： 1. diff策略 React diff算法： React的diff算法主要采用了同层级比较的策略，即它不会跨层级比较节…...
WSL 2 中 FastReport 与 FastCube 的设置方法与优化策略
软件开发人员长期以来一直在思考这个问题：“我们如何才能直接在 Windows 中运行 Linux 应用程序，而无需使用单独的虚拟机？” WSL 技术为这个问题提供了一个可能的答案。WSL 的历史始于 2016 年。当时，其实现涉及使用 Windows 内核…...
《线性代数》学习笔记
列向量无关 上个星期继续学线性代数，一个矩阵，如何判断它是的列向量有几个是线性无关呢？其实有好几个方法。第一个就是一个一个判断。 先选定一个，然后看下这两个，怎么看呢？如果两个列向量线性相关&#…...
Redis三种集群模式：主从模式、哨兵模式和Cluster模式
目录标题 1、背景及介绍2、 Redis 主从复制2.1、主从复制特点2.2、Redis主从复制原理2.3 PSYNC 工作原理2.3.1、启动或重连判断：2.3.2、第一次同步处理：2.3.3、断线重连处理：2.3.4、主节点响应2.3.5、全量同步触发条件：2.3.6、复制…...
CDH大数据平台部署
二、CDH简介 全称Cloudera’s Distribution Including Apache Hadoop。 hadoop的版本 (Apache、CDH、Hotonworks版本) 在公司中一般使用cdh多一些（收费的）、也有公司使用阿里云大数据平台、微软的大数据平台。 国内也有一些平台：星环大数…...
7.4、实验四：RIPv2 认证和触发式更新
源文件 一、引言：为什么要认证和采用触发式更新？ 1. RIP v2 认证 RIP（Routing Information Protocol）版本 2 添加了认证功能，以提高网络的安全性。认证的作用主要包括以下几点： 防止路由欺骗 RIP v1 是不…...
终极指南：如何从碧蓝航线中提取Live2D角色资源
终极指南：如何从碧蓝航线中提取Live2D角色资源 【免费下载链接】AzurLaneLive2DExtract OBSOLETE - see readme / 碧蓝航线Live2D提取 项目地址: https://gitcode.com/gh_mirrors/az/AzurLaneLive2DExtract 碧蓝航线Live2D提取工具是一个专门用于从Unity游戏…...
科研心路历程篇（1）——从仿真到实验：一名电机控制硕士的工程实践与认知迭代
1. 从仿真到实验的认知跨越 第一次在电脑上看到电机仿真波形完美运行时，我以为自己已经掌握了电机控制的精髓。直到真正面对实验室里那台嗡嗡作响的电机时，才发现理论和现实之间隔着一道鸿沟。记得当时用Simulink搭建的永磁同步电机模型，电流…...
AI Agent开发实战：基于PyTorch与LangChain构建自主任务执行智能体
AI Agent开发实战：基于PyTorch与LangChain构建自主任务执行智能体 1. 为什么需要自主任务执行智能体 想象一下，你每天要处理几十封邮件、查找各种资料、整理会议纪要，还要写周报。这些重复性工作占据了大量时间，而真正需要创造力…...
SmolVLA长序列建模效果剖析：对比LSTM在时序预测任务中的表现
SmolVLA长序列建模效果剖析：对比LSTM在时序预测任务中的表现 最近在时间序列预测这个老生常谈的领域里，总有人问我：现在各种基于Transformer的新模型层出不穷，它们真的比LSTM这种“老将”强很多吗？尤其是在处理长序列…...
GetQzonehistory：终极QQ空间说说备份完整指南
GetQzonehistory：终极QQ空间说说备份完整指南 【免费下载链接】GetQzonehistory 获取QQ空间发布的历史说说 项目地址: https://gitcode.com/GitHub_Trending/ge/GetQzonehistory 在数字记忆时代，QQ空间承载了无数人的青春回忆。那些年发的说说、分…...
CasRel在教育AI中的应用：试题解析中‘知识点-考查方式-难度等级’三元组标注
CasRel在教育AI中的应用：试题解析中‘知识点-考查方式-难度等级’三元组标注 1. 引言：从海量试题到结构化知识 如果你是教育行业的从业者，无论是老师、教研员还是在线教育平台的产品经理，一定都面临过这样的困扰：手头…...
Stable Yogi Leather-Dress-Collection开源模型应用：ACG创作者无需订阅即可拥有的本地皮衣工具
Stable Yogi Leather-Dress-Collection开源模型应用：ACG创作者无需订阅即可拥有的本地皮衣工具 1. 项目概述 Stable Yogi Leather-Dress-Collection是一款专为动漫创作者设计的2.5D皮衣穿搭生成工具。基于Stable Diffusion v1.5和Anything V5动漫底座模型开发&…...
学术研究助手：OpenClaw+nanobot自动抓取论文与生成综述
学术研究助手：OpenClawnanobot自动抓取论文与生成综述 1. 为什么需要自动化文献处理 作为一名经常需要追踪前沿研究的科研人员，我发现自己每周要花至少8小时在arXiv上筛选论文、阅读摘要、整理笔记。最痛苦的是，当我需要撰写某领域的综述时…...
Wan2.2-T2V-A5B赋能电商：Java开发实现商品短视频自动生成
Wan2.2-T2V-A5B赋能电商：Java开发实现商品短视频自动生成 最近和几个做电商的朋友聊天，他们都在头疼同一个问题：商品短视频的制作。一个爆款商品，可能需要几十个不同角度、不同卖点的短视频，投放到抖音、快手、淘宝逛…...
突破窗口限制：Windows桌面管理的高级技术方案
突破窗口限制：Windows桌面管理的高级技术方案 【免费下载链接】WindowResizer 一个可以强制调整应用程序窗口大小的工具 项目地址: https://gitcode.com/gh_mirrors/wi/WindowResizer 你是否曾遇到过这样的情况：某个应用程序的窗口尺寸固定&#…...