当前位置：首页 > 全部内容 > 正文

JS移动端在线签署协议实现：Canvas签名与长文本抄写方案

作者：竹影

时间：2026-10-23

浏览：213

本文详细记录了在移动端使用HTML5 Canvas实现在线签署协议的技术过程。内容涵盖签名板的初始化、触摸事件监听与默认行为阻止、签名路径绘制、以及将签名转换为图片并合成至协议模板的完整流程。针对长文本抄写需求，实现了画布无限拖动与内容合并显示功能，提供了从界面交互到最终图片生成的完整代码逻辑与注意事项。

文章目录

移动端在线签署需求背景

在一个平常的工作日下午，临近下班时突然接到开发在线签署协议的需求。起初认为只需参考现有案例即可快速完成，但由于缺乏Canvas使用经验，实际开发过程充满挑战。以下记录整个实现历程与关键技术点。

协议模板与需求分析

协议模板

移动端在线签署需求背景 

需求分析

如上图所示，核心需求是构建一个电子签名板，用户可在其上书写签名。提交后，系统需生成包含签名的图片，并将签名准确放置到协议模板的指定位置。

实现该功能的首选方案是利用Canvas绘制手写路径。

设计思路探讨：

曾考虑逐字记录书写轨迹并拼接，但考虑到用户体验不佳，该方案被否决。

最终确定方案：支持单行多字书写，允许用户通过滑动Canvas持续书写（适用于协议末尾需抄写长段文字的场景）。

Canvas签名绘制实现

Canvas路径绘制与签名实现

移动端在线签署需求背景 


<canvas id="canvas" style="top:0">您的手机不支持在线签署</canvas>

const canvasPaint = {};//定义一个全局对象，把canvas的各种状态存进去
canvasPaint.canvas = document.getElementById("canvas");
canvasPaint.ctx = document.getElementById("canvas").getContext("2d");
canvasPaint.ctx.lineCap = 'round';//让结束线帽呈现圆滑状
canvasPaint.ctx.lineJoin = 'round';//交汇时呈现圆滑状
canvasPaint.ctx.strokeWidth = 5;//描边宽度
canvasPaint.ctx.lineWidth = 5;//线条宽度

完成画布初始化后，关键步骤是监听画布上的触摸滑动事件。


canvasPaint.canvas.addEventListener('touchstart', startEventHandler, {passive: false});
function startEventHandler(event) {
 event.preventDefault();
 canvasPaint.ctx.beginPath();//每次都是一个新路径,不写会和上个字的最后一笔连起来
 canvasPaint.canvas.addEventListener('touchmove', moveEventHandler, {passive: false});
 canvasPaint.canvas.addEventListener('touchend', endEventHandler, {passive: false});
}

passive: false 和 event.preventDefault() 这两个配置紧密配合，event.preventDefault() 用于阻止默认行为，防止在书写时触发浏览器自带的下拉刷新或滚动动作。其中passive: false是Chrome 56版本后引入的新属性，设置为false表示告知浏览器存在阻止默认行为的代码，要求浏览器先执行event.preventDefault() 逻辑再处理滑动。若设为true，浏览器会忽略该阻止逻辑，导致功能失效。这是开发中的一个常见陷阱。

接下来编写移动划线逻辑，处理触摸移动时的坐标计算与绘制。


function moveEventHandler(event) {
 event.preventDefault();
 var coverPos = canvasPaint.canvas.getBoundingClientRect();
 canvasPaint.mouseX = event.clientX - coverPos.left;
 canvasPaint.mouseY = event.clientY - coverPos.top;
 if (canvasPaint.canPaint) {//后续为拖动画布功能设置的状态
 canvasPaint.ctx.lineTo(//使用lineTo将移动过的坐标绘制成线
 canvasPaint.mouseX,
 canvasPaint.mouseY
 );
 canvasPaint.ctx.stroke();//绘制
 }
}
function endEventHandler(event) {
 event.preventDefault();
 //抬起手指时取消move和end事件的监听
 canvasPaint.canvas.removeEventListener('touchmove', moveEventHandler, false);
 canvasPaint.canvas.removeEventListener('touchend', endEventHandler, false);
}

Canvas清屏功能

该功能实现较为简单，仅需一行代码。


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

签名提交与图片合成

提交签名处理

首先需将画布上的手写内容转换为Image对象，随后使用drawImage方法将其绘制到协议模板上。


preLoadImg(['/assets/index/images/agree.jpg', canvasPaint.canvas.toDataURL()], result);
//agree.jpg为协议名，canvasPaint.canvas.toDataURL()就是签好的字转换为base64的结果
function preLoadImg(source, callBack, args) {
 var pr = [];
 source.forEach(url => {
 var p = loadImage(url)
 .then(function (img) {
 return img;
 })
 .catch(function (err) {
 console.log(err);
 });
 pr.push(p);
 });

 Promise.all(pr)
 .then(function (imgArray) {
 callBack(imgArray, args);
 });

}
function loadImage(url) {
 return new Promise((resolve, reject) => {
 var img = new Image();
 img.onload = function () {
 resolve(img);
 };
 img.onerror = reject;
 img.src = url;
 });
}

由于Image的src赋值是异步操作，必须等待完整的Image对象生成。因此使用Promise进行包装，确保所有图片转换完成后，再将结果传入回调函数（result）中。


function result(imgArr) {
 drawName(imgArr);
}
function drawName(imgArr) {
 //绘制名字和底部的名字和日期
 canvasPaint.canvas2 = document.getElementById('canvas2');
 canvasPaint.context2 = canvasPaint.canvas2.getContext('2d');
 canvasPaint.ratio = canvasPaint.canvas.height / canvasPaint.canvas.width; //计算画布比例
 canvasPaint.context2.drawImage(imgArr[0], 0, 0, 500, 707);//img0是底图原协议
 canvasPaint.context2.save();
 canvasPaint.context2.translate(50, 190);
 canvasPaint.context2.rotate(270 * Math.PI / 180);
 canvasPaint.context2.drawImage(imgArr[1], 80, 50, 33, 33 * canvasPaint.ratio);//画反转后的名字
 canvasPaint.context2.restore();
 canvasPaint.context2.save();
 canvasPaint.context2.translate(67, 723);//下方的字
 canvasPaint.context2.rotate(270 * Math.PI / 180);
 canvasPaint.context2.drawImage(imgArr[1], 80, 50, 33, 33 * canvasPaint.ratio);//画反转后的名字
 canvasPaint.context2.restore();
 canvasPaint.context2.save();
 canvasPaint.context2.translate(400, 625);//下方的字
 canvasPaint.context2.font = "11px 微软雅黑";
 canvasPaint.context2.fillStyle = "#000";
 canvasPaint.context2.textAlign = "center";
 canvasPaint.context2.textBaseline = "middle";
 var time = new Date().toLocaleString().split(' ')[0];
 canvasPaint.context2.fillText(time, 0, 0);
 canvasPaint.context2.restore();
 prevDrawStatement();
}

核心难点在于理解Canvas的rotate和translate方法，通过这两个方法可实现文字的任意角度旋转及定位放置。

长文本抄写与画布拖动

长文本手写与画布拖动

移动端在线签署需求背景 

签名完成后，已使用另一个Canvas将文字与原协议合成。接下来需实现无限拖动功能，逻辑相对简单。

在实现拖动前，需先清空之前的画布内容。


function prevDrawStatement() {
 clearCanvas();//清除画布
 canvasPaint.finish.innerHTML = "提交抄写";
 canvasPaint.pencilBtn.style.display = 'block';
 canvasPaint.secondState.style.display = 'block';
 canvasPaint.tips.innerHTML = "(最后一步)请抄写屏幕上方引号内的确认语句";
 canvasPaint.tips.style.color = 'red';
 setTimeout(function () {
 canvasPaint.tips.style.color = '#666';
 }, 2000);
 state = STATEMENT;//开始写句子
}

右上角设有移动签字板功能，主要实现左右移动效果，相关代码逻辑如下。


function togglePencil() {
 if (canvasPaint.canPaint) {
 canvasPaint.canPaint = false;
 canvasPaint.pencilBtn.innerText = "使用签字笔";
 //不能签字时应该把开始写字事件去掉，同时加上document事件
 canvasPaint.canvas.removeEventListener('touchstart', startEventHandler, false);
 document.addEventListener('touchstart', documentStartEventHandler, {passive: false});
 } else {
 canvasPaint.canPaint = true;
 canvasPaint.pencilBtn.innerText = "移动签字板";
 //能签字时应该把开始写字事件绑定上去，同时去掉document事件
 canvasPaint.canvas.addEventListener('touchstart', startEventHandler, {passive: false});
 document.removeEventListener('touchstart', documentStartEventHandler, false);
 }
}
function documentStartEventHandler(event) {
 event.preventDefault();
 canvasPaint.y = event.clientY;
 canvasPaint.top = parseFloat(canvasPaint.canvas.style.top);//画板距离顶部的值
 document.addEventListener('touchmove', documentMoveEventHandler, {passive: false});
 document.addEventListener('touchend', documentEndEventHandler, {passive: false});
}
function documentMoveEventHandler(event) {
 event.preventDefault();
 canvasPaint.newY = event.clientY - canvasPaint.y;
 if (!canvasPaint.canPaint) {
 canvasPaint.canvas.style.top = canvasPaint.newY + canvasPaint.top + 'px';
 if (parseFloat(canvasPaint.canvas.style.top) > 0) {//限制边界
  canvasPaint.canvas.style.top = 0 + 'px';
 }
 }
}

function documentEndEventHandler(event) {
 event.preventDefault();
}

最终图片生成与显示

长句合成至协议并显示最终图片

点击提交抄写按钮后，执行以下函数处理逻辑。


function statementDraw(imgArr) {
 canvasPaint.context2.save();
 canvasPaint.context2.translate(52, 690);
 canvasPaint.context2.rotate(270 * Math.PI / 180);
 canvasPaint.context2.drawImage(imgArr[0], 80, 50, 33, 33 * canvasPaint.ratio);//画反转后的名字
 canvasPaint.context2.restore();
 console.log(canvasPaint.canvas2.toDataURL());
 document.getElementById('resultImg').setAttribute('src', canvasPaint.canvas2.toDataURL());
 document.getElementById('resultImg').style.position = 'absolute';
 document.getElementById('resultImg').style.left = 0;
 document.getElementById('resultImg').style.top = 0;
 document.getElementById('resultImg').style.zIndex = 50;
}


在一个平常的工作日下午，临近下班时突然接到开发在线签署协议的需求。起初认为只需参考现有案例即可快速完成，但由于缺乏Canvas使用经验，实际开发过程充满挑战。以下记录整个实现历程与关键技术点。

协议模板

需求分析

如上图所示，核心需求是构建一个电子签名板，用户可在其上书写签名。提交后，系统需生成包含签名的图片，并将签名准确放置到协议模板的指定位置。

实现该功能的首选方案是利用Canvas绘制手写路径。

设计思路探讨：

曾考虑逐字记录书写轨迹并拼接，但考虑到用户体验不佳，该方案被否决。

最终确定方案：支持单行多字书写，允许用户通过滑动Canvas持续书写（适用于协议末尾需抄写长段文字的场景）。

Canvas路径绘制与签名实现


<canvas id="canvas" style="top:0">您的手机不支持在线签署</canvas>

const canvasPaint = {};//定义一个全局对象，把canvas的各种状态存进去
canvasPaint.canvas = document.getElementById("canvas");
canvasPaint.ctx = document.getElementById("canvas").getContext("2d");
canvasPaint.ctx.lineCap = 'round';//让结束线帽呈现圆滑状
canvasPaint.ctx.lineJoin = 'round';//交汇时呈现圆滑状
canvasPaint.ctx.strokeWidth = 5;//描边宽度
canvasPaint.ctx.lineWidth = 5;//线条宽度

完成画布初始化后，关键步骤是监听画布上的触摸滑动事件。


canvasPaint.canvas.addEventListener('touchstart', startEventHandler, {passive: false});
function startEventHandler(event) {
 event.preventDefault();
 canvasPaint.ctx.beginPath();//每次都是一个新路径,不写会和上个字的最后一笔连起来
 canvasPaint.canvas.addEventListener('touchmove', moveEventHandler, {passive: false});
 canvasPaint.canvas.addEventListener('touchend', endEventHandler, {passive: false});
}

passive: false 和 event.preventDefault()这两个配置紧密配合，event.preventDefault() 用于阻止默认行为，防止在书写时触发浏览器自带的下拉刷新或滚动动作。其中passive: false是Chrome 56版本后引入的新属性，设置为false表示告知浏览器存在阻止默认行为的代码，要求浏览器先执行event.preventDefault()逻辑再处理滑动。若设为true，浏览器会忽略该阻止逻辑，导致功能失效。这是开发中的一个常见陷阱。

接下来编写移动划线逻辑，处理触摸移动时的坐标计算与绘制。


function moveEventHandler(event) {
 event.preventDefault();
 var coverPos = canvasPaint.canvas.getBoundingClientRect();
 canvasPaint.mouseX = event.clientX - coverPos.left;
 canvasPaint.mouseY = event.clientY - coverPos.top;
 if (canvasPaint.canPaint) {//后续为拖动画布功能设置的状态
 canvasPaint.ctx.lineTo(//使用lineTo将移动过的坐标绘制成线
  canvasPaint.mouseX,
  canvasPaint.mouseY
 );
 canvasPaint.ctx.stroke();//绘制
 }
}
function endEventHandler(event) {
 event.preventDefault();
 //抬起手指时取消move和end事件的监听
 canvasPaint.canvas.removeEventListener('touchmove', moveEventHandler, false);
 canvasPaint.canvas.removeEventListener('touchend', endEventHandler, false);
}

Canvas清屏功能

该功能实现较为简单，仅需一行代码。


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

提交签名处理

首先需将画布上的手写内容转换为Image对象，随后使用drawImage方法将其绘制到协议模板上。


preLoadImg(['/assets/index/images/agree.jpg', canvasPaint.canvas.toDataURL()], result);
//agree.jpg为协议名，canvasPaint.canvas.toDataURL()就是签好的字转换为base64的结果
function preLoadImg(source, callBack, args) {
 var pr = [];
 source.forEach(url => {
 var p = loadImage(url)
  .then(function (img) {
  return img;
  })
  .catch(function (err) {
  console.log(err);
  });
 pr.push(p);
 });

 Promise.all(pr)
 .then(function (imgArray) {
  callBack(imgArray, args);
 });

}
function loadImage(url) {
 return new Promise((resolve, reject) => {
 var img = new Image();
 img.onload = function () {
  resolve(img);
 };
 img.onerror = reject;
 img.src = url;
 });
}

由于Image的src赋值是异步操作，必须等待完整的Image对象生成。因此使用Promise进行包装，确保所有图片转换完成后，再将结果传入回调函数（result）中。


function result(imgArr) {
 drawName(imgArr);
}
function drawName(imgArr) {
 //绘制名字和底部的名字和日期
 canvasPaint.canvas2 = document.getElementById('canvas2');
 canvasPaint.context2 = canvasPaint.canvas2.getContext('2d');
 canvasPaint.ratio = canvasPaint.canvas.height / canvasPaint.canvas.width; //计算画布比例
 canvasPaint.context2.drawImage(imgArr[0], 0, 0, 500, 707);//img0是底图原协议
 canvasPaint.context2.save();
 canvasPaint.context2.translate(50, 190);
 canvasPaint.context2.rotate(270 * Math.PI / 180);
 canvasPaint.context2.drawImage(imgArr[1], 80, 50, 33, 33 * canvasPaint.ratio);//画反转后的名字
 canvasPaint.context2.restore();
 canvasPaint.context2.save();
 canvasPaint.context2.translate(67, 723);//下方的字
 canvasPaint.context2.rotate(270 * Math.PI / 180);
 canvasPaint.context2.drawImage(imgArr[1], 80, 50, 33, 33 * canvasPaint.ratio);//画反转后的名字
 canvasPaint.context2.restore();
 canvasPaint.context2.save();
 canvasPaint.context2.translate(400, 625);//下方的字
 canvasPaint.context2.font = "11px 微软雅黑";
 canvasPaint.context2.fillStyle = "#000";
 canvasPaint.context2.textAlign = "center";
 canvasPaint.context2.textBaseline = "middle";
 var time = new Date().toLocaleString().split(' ')[0];
 canvasPaint.context2.fillText(time, 0, 0);
 canvasPaint.context2.restore();
 prevDrawStatement();
}

核心难点在于理解Canvas的rotate和translate方法，通过这两个方法可实现文字的任意角度旋转及定位放置。

长文本手写与画布拖动

签名完成后，已使用另一个Canvas将文字与原协议合成。接下来需实现无限拖动功能，逻辑相对简单。

在实现拖动前，需先清空之前的画布内容。


function prevDrawStatement() {
 clearCanvas();//清除画布
 canvasPaint.finish.innerHTML = "提交抄写";
 canvasPaint.pencilBtn.style.display = 'block';
 canvasPaint.secondState.style.display = 'block';
 canvasPaint.tips.innerHTML = "(最后一步)请抄写屏幕上方引号内的确认语句";
 canvasPaint.tips.style.color = 'red';
 setTimeout(function () {
 canvasPaint.tips.style.color = '#666';
 }, 2000);
 state = STATEMENT;//开始写句子
}

右上角设有移动签字板功能，主要实现左右移动效果，相关代码逻辑如下。


function togglePencil() {
 if (canvasPaint.canPaint) {
 canvasPaint.canPaint = false;
 canvasPaint.pencilBtn.innerText = "使用签字笔";
 //不能签字时应该把开始写字事件去掉，同时加上document事件
 canvasPaint.canvas.removeEventListener('touchstart', startEventHandler, false);
 document.addEventListener('touchstart', documentStartEventHandler, {passive: false});
 } else {
 canvasPaint.canPaint = true;
 canvasPaint.pencilBtn.innerText = "移动签字板";
 //能签字时应该把开始写字事件绑定上去，同时去掉document事件
 canvasPaint.canvas.addEventListener('touchstart', startEventHandler, {passive: false});
 document.removeEventListener('touchstart', documentStartEventHandler, false);
 }
}
function documentStartEventHandler(event) {
 event.preventDefault();
 canvasPaint.y = event.clientY;
 canvasPaint.top = parseFloat(canvasPaint.canvas.style.top);//画板距离顶部的值
 document.addEventListener('touchmove', documentMoveEventHandler, {passive: false});
 document.addEventListener('touchend', documentEndEventHandler, {passive: false});
}
function documentMoveEventHandler(event) {
 event.preventDefault();
 canvasPaint.newY = event.clientY - canvasPaint.y;
 if (!canvasPaint.canPaint) {
 canvasPaint.canvas.style.top = canvasPaint.newY + canvasPaint.top + 'px';
 if (parseFloat(canvasPaint.canvas.style.top) > 0) {//限制边界
  canvasPaint.canvas.style.top = 0 + 'px';
 }
 }
}

function documentEndEventHandler(event) {
 event.preventDefault();
}

长句合成至协议并显示最终图片

点击提交抄写按钮后，执行以下函数处理逻辑。


function statementDraw(imgArr) {
 canvasPaint.context2.save();
 canvasPaint.context2.translate(52, 690);
 canvasPaint.context2.rotate(270 * Math.PI / 180);
 canvasPaint.context2.drawImage(imgArr[0], 80, 50, 33, 33 * canvasPaint.ratio);//画反转后的名字
 canvasPaint.context2.restore();
 console.log(canvasPaint.canvas2.toDataURL());
 document.getElementById('resultImg').setAttribute('src', canvasPaint.canvas2.toDataURL());
 document.getElementById('resultImg').style.position = 'absolute';
 document.getElementById('resultImg').style.left = 0;
 document.getElementById('resultImg').style.top = 0;
 document.getElementById('resultImg').style.zIndex = 50;
}

总结与致谢

总结

以上介绍了JS实现移动端在线签署协议功能的完整流程，希望能为开发者提供参考。如有任何疑问，欢迎留言交流，小编会及时回复。感谢大家的支持！若本文对您有帮助，欢迎转载，请注明出处，谢谢！

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印，自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式，预览压缩前后的大小。

使用 ›
作者最新文章

网页开发三者分工：HTML结构、CSS样式与JavaScript交互怎么协作

JS解析URL参数时怎么处理中文乱码和特殊字符

js-cookie 存储 JSON 对象：自动序列化与反序列化技巧

marked.js 快速上手：安装与基础 Markdown 转 HTML 示例

Phaser.js 与 PixiJS、Cocos Creator 的技术选型对比

相关文章
热门文章
更多
CSS text-transform与JS修改首字母大写的适用场景区别
JS中constructor属性判断数组存在哪些风险
JS正则替换中$1捕获组引用与字符串重组技巧
全栈开发中JavaScript与Java怎么协作？前后端技术栈配合解析
Node.js后端生成高强度随机字符串的方法
怎么在本地运行JavaScript脚本：Node.js下载安装与环境配置教程
JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符
JS 解压出现乱码或报错怎么解决？
JavaScript常见SyntaxError语法错误排查与修复方法
JavaScript实现按钮点击冷却时间的完整代码示例