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

如何用HTML5 Canvas实现电子签名功能✍️

article 2026/3/17 3:08:46

在这里插入图片描述

🤖 作者简介：水煮白菜王，一位资深前端劝退师 👻
👀 文章专栏：前端专栏，记录一下平时在博客写作中，总结出的一些开发技巧和知识归纳总结✍。
感谢支持💕💕💕

🖌️电子签名作为数字化转型的重要环节，在前端可通过HTML5 Canvas轻松实现。本文将以HTML De示例🎨，手把手带您完成一个电子签名功能。

一、实现原理与核心技术
二、核心代码实现解析
- 2.1 画布初始化
- 2.2 画笔样式配置
- 2.3 设备兼容处理
- 2.4 绘制逻辑实现
- - 起笔监听：
  - 移动绘制：
  - 收笔处理：
- 2.5 功能按钮实现
- - 清空画布：
  - 保存签名：
  - 可加撤销功能：
三、注意事项
四、完整代码示例

一、实现原理与核心技术

通过HTML5 Canvas的2D绘图上下文实现轨迹捕捉，结合事件监听处理完成核心绘制功能。关键技术点包括：

Canvas绘图API：Path路径操作
事件系统：鼠标/触摸事件统一处理
文件导出：Canvas转Blob对象

二、核心代码实现解析

2.1 画布初始化

设置600x300画布并获取2D上下文，建议根据屏幕尺寸动态调整画布大小。

const canvas = document.querySelector('canvas');
canvas.width = 500;
canvas.height = 300;
const ctx = canvas.getContext('2d');

2.2 画笔样式配置

通过lineCap和lineJoin实现自然的手写效果。

ctx.lineWidth = 3;
ctx.strokeStyle = 'red';
ctx.lineCap = 'round'; // 圆角线头
ctx.lineJoin = 'round'; // 圆角连接

2.3 设备兼容处理

通过UA检测自动切换触摸/鼠标事件，实际项目中建议使用pointer events实现更优雅的兼容。

const mobileStatus = /Mobile|Android|iPhone/i.test(navigator.userAgent);

2.4 绘制逻辑实现

起笔监听：

function start(event) {const pos = mobileStatus ? event.changedTouches[0] : event;ctx.beginPath();ctx.moveTo(pos.pageX, pos.pageY);window.addEventListener(mobileStatus ? 'touchmove' : 'mousemove', draw);
}

移动绘制：

function draw(event) {const pos = mobileStatus ? event.changedTouches[0] : event;ctx.lineTo(pos.pageX, pos.pageY);ctx.stroke(); // 实时渲染路径
}

收笔处理：

function closeDraw() {window.removeEventListener('mousemove', draw);
}

2.5 功能按钮实现

清空画布：

function cancel() {ctx.clearRect(0, 0, canvas.width, canvas.height);
}

保存签名：

function save() {canvas.toBlob(blob => {const a = document.createElement('a');a.download = `${Date.now()}.png`;a.href = URL.createObjectURL(blob);a.click();});
}

可加撤销功能：

let history = [];
// 绘制时保存状态
history.push(ctx.getImageData(0,0,canvas.width,canvas.height));function undo() {if(history.length > 1) {history.pop();ctx.putImageData(history[history.length-1], 0,0);}
}

三、注意事项

性能优化：大数据量绘制建议使用requestAnimationFrame
跨域问题：若涉及图片合成需设置crossOrigin=“anonymous”
移动端适配：添加CSS样式防止触摸滚动

canvas {touch-action: none;background: #f8f8f8;
}

四、完整代码示例

<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>* {margin: 0 auto;padding: 0;}button { padding: 3px 5px;margin: 5px; }</style></head><body><canvas id="sign"></canvas><div><button onclick="cancel()">取消</button><button onclick="save()">保存</button></div></body><script>const canvas = document.querySelector('canvas');canvas.width = 600;canvas.height = 300;canvas.style.borderRadius = '5px';canvas.style.border = '1px solid #a6a9ad';const ctx = canvas.getContext('2d');// 高清屏适配const scale = window.devicePixelRatio;canvas.width = 600 * scale;canvas.height = 300 * scale;ctx.scale(scale, scale);ctx.lineWidth = 3; //线宽ctx.strokeStyle = 'black'; //线颜色ctx.lineCap = 'round'; //线条的结束端点样式ctx.lineJoin = 'round'; //两条线相交时，所创建的拐角类型// 检测移动设备const mobileStatus = /Mobile|Android|iPhone/i.test(navigator.userAgent);const start = (event) => {const { offsetX, offsetY, pageX, pageY } = mobileStatus? event.changedTouches[0]: event;ctx.beginPath(); //起始一条路径，或重置当前路径ctx.moveTo(pageX, pageY); //把路径移动到画布中的指定点，不创建线条window.addEventListener(mobileStatus ? 'touchmove' : 'mousemove', draw);};const draw = (event) => {const { pageX, pageY } = mobileStatus ? event.changedTouches[0] : event;ctx.lineTo(pageX, pageY); //添加一个新点，然后在画布中创建从该点到最后指定点的线条ctx.stroke(); //绘制已定义的路径};const cloaseDraw = () => {window.removeEventListener('mousemove', draw);};window.addEventListener(mobileStatus ? 'touchstart' : 'mousedown', start);window.addEventListener(mobileStatus ? 'touchend' : 'mouseup', cloaseDraw);const cancel = () => {ctx.clearRect(0, 0, 600, 300); //在给定的矩形内清除指定的像素};const save = () => {canvas.toBlob((blob) => {const date = Date.now().toString();const a = document.createElement('a');a.download = `${date}.png`;a.href = URL.createObjectURL(blob);a.click();a.remove();});};</script>
</html>

实际项目中需结合后端实现签名验证、添加时间戳等扩展功能。可继续丰富代码逻辑：

添加Base64导出功能
实现笔锋效果（通过速度计算线宽）
添加本地存储自动保存

Canvas的绘图能力还能延伸应用于手写笔记、电子批注等场景。

在这里插入图片描述
如果你觉得这篇文章对你有帮助，请点赞 👍、收藏 👏 并关注我！👀

如何用HTML5 Canvas实现电子签名功能✍️

🤖 作者简介：水煮白菜王，一位资深前端劝退师 👻 👀 文章专栏： 前端专栏 ，记录一下平时在博客写作中，总结出的一些开发技巧和知识归纳总结✍。感谢支持💕💕&a…...

编程日记 2026/3/13 6:11:17

区块链中的数字签名：安全性与可信度的核心

数字签名是区块链技术的信任基石，它像区块链世界的身份证和防伪标签，确保每一笔交易的真实性、完整性和不可抵赖性。本文会用通俗的语言，带你彻底搞懂区块链中的数字签名！ 文章目录 1. 数字签名是什么？从现实世界到区块…...

编程日记 2026/3/12 15:53:37

RabbitMQ 高级特性：从 TTL 到消息分发的全面解析（下）

RabbitMQ高级特性 RabbitMQ 高级特性解析：RabbitMQ 消息可靠性保障 （上）-CSDN博客 RabbitMQ 高级特性：从 TTL 到消息分发的全面解析 （下）-CSDN博客引言 RabbitMQ 作为一款强大的消息队列中间件&#xff…...

编程日记 2026/2/24 11:32:41

表格columns拼接两个后端返回的字段（以umi框架为例）

在用组件对前端项目进行开发时，我们会遇到以下情况：项目原型中有取值范围这个表字段，需要存放最小取值到最大取值。而后端返回给我们的数据是返回了一个最小值和一个最大值， 在columns中我们需要对这两个字段进行拼接&#xff0…...

编程日记 2026/3/14 10:40:37

sparkTTS window 安装

SparkTTS 的简介 Spark-TTS是一种基于SpardAudio团队提出的 BiCodec 构建的新系统，BiCodec 是一种单流语音编解码器，可将语音策略性地分解为两种互补的标记类型：用于语言内容的低比特率语义标记和用于说话者特定属性的固定长度全局标记。这种…...

编程日记 2026/3/16 4:07:16

【K8S系列】深入探究Kubernetes中查看日志的方法

在Kubernetes（简称K8s）的世界里，日志是诊断和排查问题的关键线索。无论是应用程序的运行状态、错误信息，还是系统的健康状况，都能从日志中找到蛛丝马迹。本文将详细介绍在K8s中查看日志的各种方法，从基础的…...

编程日记 2026/3/14 22:06:32

How to install nodejs with nvm on Linux mint 22.1

nvm是nodejs官方用于管理nodejs多版本环境的一个工具 ，今天，我带领大家基于nvm完成nodejs在Linux mint 22.1上的安装。考虑到Linux mint 22.1是基于ubuntu 24.04.1 LTS的，所以，这里的安装也完全适用于nodejs在nodejs上的安装。 …...

编程日记 2026/3/15 14:22:47

JmeterHttp请求头管理出现Unsupported Media Type问题解决

JmeterHttp请求头管理出现Unsupported Media Type问题解决大多数的app与pc端压测的时候都会出现这种情况当我们在jemter测试当中当中遇见Unsupported Media Type，有一种可能就是我们请求的网页的content-Type的类型与我们测试的时候的类型不一致解决方法可以添…...

编程日记 2026/3/14 6:32:49

十大数据科学Python库

十大数据科学Python库 1、NumPy：脊髓2、Pandas：数据操纵专家3、Matplotlib：艺术之魂4、Scikit-Learn：瑞士军刀5、TensorFlow：聪明的家伙6、PyTorch：叛逆者7、Selenium：操纵大师8、NLTK&#xff…...

编程日记 2026/3/14 4:36:09

LabVIEW伺服阀高频振动测试

在伺服阀高频振动测试中，闭环控制系统的实时性与稳定性至关重要。针对用户提出的1kHz控制频率需求及Windows平台兼容性问题，本文重点分析NI PCIe-7842R实时扩展卡的功能与局限性，并提供其他替代方案的综合对比，以帮助用户选择适合…...

编程日记 2026/3/16 16:26:05

解决asp.net mvc发布到iis下安全问题

解决asp.net mvc发布到iis下安全问题环境信息1.The web/application server is leaking version information via the "Server" HTTP response2.确保您的Web服务器、应用程序服务器、负载均衡器等已配置为强制执行Strict-Transport-Security。3.在HTML提交表单中找不…...

编程日记 2026/3/14 14:08:58

CSS-基础选择器，字体属性，文本属性介绍

一、CSS 简介 CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称. 有时我们也会称之为 CSS 样式表或级联样式表｡ CSS 是也是一种标记语言 CSS 主要用于设置 HTML 页面中的文本内容(字体､大小､对齐方式等)､图片的外形(宽高&a…...

编程日记 2026/3/14 3:28:22

git submodule管理的仓库怎么删除子仓库

删除 Git 子模块需要执行一系列步骤，以确保从项目中彻底移除子模块及其相关配置。以下是详细的步骤： 1. 取消初始化子模块运行以下命令以取消子模块的初始化，这会从 .git/config 文件中移除子模块的配置： git submodule deini…...

编程日记 2026/2/25 3:21:26

vtkDepthSortPolyData 根据相机视图方向对多边形数据进行排序

1. 作用在 3D 渲染中，透明对象的渲染顺序非常重要。如果透明对象的渲染顺序不正确，可能会导致错误的视觉效果（例如，远处的透明对象遮挡了近处的透明对象）。vtkDepthSortPolyData 通过对多边形数据进行深度排序&#…...

编程日记 2026/3/14 10:19:55

菜鸟开发之MySQL常见字段值处理

仰天大笑出门去，我辈更要谱天曲。 SQL一日同风起，基础不夯注定倾。众里寻它千百度，蓦然回首，那个错误还在吐。 Java开发该过程中性能问题是存在的，而数据处理则是占据大头，平时开发一定要注意代码质量和…...

编程日记 2026/3/11 5:09:25

ubuntu-学习笔记-nginx+php

nginxphp nginx下载nginx配置nginx.conf php其他记录一下在ubuntu中nginxphp部署tp项目 nginx nginx就是正常下载下载nginx sudo apt-get install nginx tp项目版本是3.2，通过设置路由，以域名/api.php/控制器/xxx的格式进行api的调用，文…...

编程日记 2026/2/17 12:51:02

【MySQL_04】数据库基本操作（用户管理--配置文件--远程连接--数据库信息查看、创建、删除）

文章目录一、MySQL 用户管理1.1 用户管理1.11 mysql.user表详解1.12 添加用户1.13 修改用户权限1.14 删除用户1.15 密码问题二、MySQL 配置文件2.1 配置文件位置2.2 配置文件结构2.3 常用配置参数三、MySQL远程连接四、数据库的查看、创建、删除4.1 查看数据库4.2 创建、删除…...

编程日记 2026/2/27 17:26:17

牛客网刷题(5)（HTML之元素＜input＞、表格＜table＞与描述列表＜dl＞、元素＜label＞）

目录一、哪种输入类型定义滑块控件？元素（input） （1）官方解析。 （2）总结。 （3）牛客大佬总结。 （4）HTML5——元素（input）的…...

编程日记 2026/3/13 21:22:12

语音视频App协议安全实战：防御伪造/窃听/Deepfake攻击

一、SDP协议安全加固 1. SDP字段校验（防止参数篡改） 安全SDP生成示例（Node.js）： const crypto require(crypto); function signSDP(sdp) { const hmac crypto.createHmac(sha256, SECRET_KEY); hmac.update(sd…...

编程日记 2026/3/6 5:27:20

Git系列之git checkout

git checkout 是 Git 中最常用的命令之一，主要用于切换分支、恢复文件或检出特定提交。以下是关于 git checkout 的所有指令、详细解释及实际应用场景的全面说明。 1. 切换分支 1.1 切换到现有分支 git checkout <branch-name>• 作用：切换到指定…...

编程日记 2026/3/13 4:50:09

IDEA（十一）调整新版本的工具栏显示Git操作（pull、commit、push、revert等）

目录一、背景二、操作步骤2.1 开启新 UI 样式2.2 设置 Tool Window 工具栏一、背景好久没有更新 IDEA 了，更新之后发现 IDEA 的工具栏消失了。一番操作之后，终于把 IDEA 的工具栏的设置调整好了，在此进行记录调整步骤，供大家学…...

编程日记 2026/3/16 21:25:22

C++编程：进阶阶段—4.2对象

目录 4.2 对象特征 4.2.1 构造函数和析构函数 4.2.2 构造函数的分类 4.2.3 拷贝函数调用时机 4.2.4 构造函数调用规则 4.2.5 深拷贝与浅拷贝 4.2.6 初始化列表 4.2.7 类对象作为类成员 4.2.8 静态成员 4.2.9 成员变量和成员函数的存储 4.2.10 this指针 4.2.11 空指针…...

编程日记 2026/3/11 5:18:43