首页 › 生活工具 › 电子签名生成器
✍

电子签名生成器

在线手写电子签名,支持鼠标和触摸屏,导出透明背景PNG

功能说明在 Canvas 上手写电子签名
输入方式鼠标 / 触摸
支持功能撤销/清空/透明背景
下载格式PNG 透明背景
笔触颜色 #1a1a1a
笔触粗细 3px
背景颜色 #ffffff
透明背景
平滑度
签名区域 请在此区域签名
请在此区域签名

电子签名生成器说明

电子签名生成器是一个在线手写签名工具,使用 HTML5 Canvas 实现平滑的签名绘制效果。支持鼠标和触摸屏输入,适用于电子合同签署、表单确认等场景。

绘制功能:在签名区域内按住鼠标左键拖动即可绘制签名。支持触摸屏设备,可直接用手指或触控笔签名。

笔触设置:可自定义笔触颜色(支持任意颜色)和笔触粗细(1-20像素)。平滑度设置控制曲线的圆滑程度,高平滑度模式使用二次贝塞尔曲线连接路径点,使签名更加流畅自然。

背景设置:可选择纯色背景或透明背景。透明背景模式下,导出的 PNG 图片仅包含签名笔迹,可直接叠加到文档上。选择纯色背景时,可自定义背景颜色。

撤销功能:每完成一笔(一次完整的鼠标按下到释放)保存为一个独立的笔触对象。点击撤销可移除最后一笔,重新绘制画布。

清空功能:一键清除所有签名内容,清空所有笔触记录。

下载功能:将签名导出为 PNG 格式图片。透明背景模式下导出的图片背景完全透明,可直接用于电子文档签名。

实现原理:使用 Canvas 2D Context 的 moveTo、lineTo 和 quadraticCurveTo 方法绘制路径。每笔保存为路径点数组,撤销时重新渲染所有保留的笔触。触摸事件通过转换坐标统一处理。

前端工具