JS移动端在线签署协议实现：Canvas签名与长文本抄写方案
作者：竹影时间：2026-10-23 10:24:00浏览：214
本文详细记录了在移动端使用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实现移动端在线签署协议功能的完整流程，希望能为开发者提供参考。如有任何疑问，欢迎留言交流，小编会及时回复。感谢大家的支持！若本文对您有帮助，欢迎转载，请注明出处，谢谢！
作者最新文章
JS怎么使用classList添加、删除和切换class
2026-11-05 17:26:02
网页开发三者分工：HTML结构、CSS样式与JavaScript交互怎么协作
2026-11-05 12:51:22
JS解析URL参数时怎么处理中文乱码和特殊字符
2026-11-05 12:47:23
js-cookie 存储 JSON 对象：自动序列化与反序列化技巧
2026-11-05 12:36:26
marked.js 快速上手：安装与基础 Markdown 转 HTML 示例
2026-11-05 09:32:53