JavaScript实现手写签名，可触屏手写，支持移动端与PC端双端保存

本文主要是介绍JavaScript实现手写签名，可触屏手写，支持移动端与PC端双端保存，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

<!DOCTYPE html>
<html>
<head><title></title><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" /><style>/* 样式表 */</style>
</head>
<body><!-- 签名区域 --><div id="signatureArea"></div><!-- 操作按钮：清除和保存 --><button id="clearButton">清除</button><button id="saveButton">保存签名</button><!-- JavaScript代码 --><script type="text/javascript">// JavaScript代码</script>
</body>
</html>

2.获取DOM元素和定义变量

// 获取DOM元素
var signatureArea = document.getElementById('signatureArea');
var clearButton = document.getElementById('clearButton');
var saveButton = document.getElementById('saveButton');// 定义变量
var isDrawing = false; // 是否正在绘制
var lastX, lastY; // 上一个触摸点的坐标

3.创建两个canvas元素，并设置它们的宽度和高度

// 创建两个canvas元素
var drawingCanvas = document.createElement('canvas'); // 用于绘制签名
var backgroundCanvas = document.createElement('canvas'); // 用于保存带有白色背景的签名图像
var drawingCtx = drawingCanvas.getContext('2d'); // 获取绘制画布的上下文对象
var backgroundCtx = backgroundCanvas.getContext('2d'); // 获取背景画布的上下文对象
drawingCanvas.width = signatureArea.offsetWidth;
drawingCanvas.height = signatureArea.offsetHeight;
backgroundCanvas.width = drawingCanvas.width;
backgroundCanvas.height = drawingCanvas.height;

4.绑定触摸事件：touchstart, touchmove, touchend和click

// 绑定触摸事件
signatureArea.addEventListener('touchstart', startDrawing);
signatureArea.addEventListener('touchmove', draw);
signatureArea.addEventListener('touchend', stopDrawing);
clearButton.addEventListener('click', clearSignature);
saveButton.addEventListener('click', saveSignature);

5.实现触摸事件回调函数：startDrawing, draw和stopDrawing

// 开始绘制
function startDrawing(e) {e.preventDefault(); // 阻止默认事件var touch = e.touches[0]; // 获取触摸点坐标var rect = signatureArea.getBoundingClientRect(); // 获取签名区域的位置和大小lastX = touch.clientX - rect.left;lastY = touch.clientY - rect.top;isDrawing = true;
}// 绘制中
function draw(e) {if (!isDrawing) return;var touch = e.touches[0];var rect = signatureArea.getBoundingClientRect();var x = touch.clientX - rect.left;var y = touch.clientY - rect.top;drawLine(lastX, lastY, x, y);lastX = x;lastY = y;
}// 停止绘制
function stopDrawing() {isDrawing = false;
}

6.实现绘制线段的函数：drawLine

// 绘制实线
function drawLine(x1, y1, x2, y2) {drawingCtx.beginPath(); // 开始一条新的路径drawingCtx.moveTo(x1, y1); // 将画笔移动到起点drawingCtx.lineTo(x2, y2); // 绘制一条直线到终点drawingCtx.lineWidth = 1; // 设置线条的宽度为1像素drawingCtx.strokeStyle = '#000'; // 设置线条颜色为黑色drawingCtx.stroke(); // 绘制线条
}

7.实现清除签名的函数：clearSignature

// 清除签名
function clearSignature() {drawingCtx.clearRect(0, 0, drawingCanvas.width, drawingCanvas.height); // 清除绘制画布的内容backgroundCtx.clearRect(0, 0, backgroundCanvas.width, backgroundCanvas.height); // 清除背景画布的内容
}

8.实现保存签名的函数：saveSignature

// 保存签名
function saveSignature() {// 绘制白色背景backgroundCtx.fillStyle = 'white';backgroundCtx.fillRect(0, 0, backgroundCanvas.width, backgroundCanvas.height);// 复制绘制的签名到带有白色背景的画布backgroundCtx.drawImage(drawingCanvas, 0, 0);// 将带有白色背景的画布内容转为PNG格式的DataURLvar dataURL = backgroundCanvas.toDataURL("image/png");// 创建一个链接元素并设置下载属性var link = document.createElement('a');link.href = dataURL;link.download = '签名.png'; // 设置下载文件的名称// 检查是否支持保存到相册if ("download" in link) {link.style.display = "none";document.body.appendChild(link);link.click();document.body.removeChild(link);} else {// 如果不支持保存到相册，你可以提供其他方式或提示用户手动保存alert("无法直接保存到相册，请手动保存签名图片。");}
}

9.将canvas元素插入DOM树中

// 将canvas元素插入DOM树中
signatureArea.appendChild(drawingCanvas);

10.完整代码

<!DOCTYPE html>
<html>
<head><title></title><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" /><style>body {font-family: Arial, sans-serif;}#signatureArea {width: 100%;height: 300px;border: 1px solid #ccc;margin-bottom: 20px;}button {padding: 10px 20px;font-size: 16px;background-color: #4CAF50;color: white;border: none;cursor: pointer;border-radius: 4px;}button:hover {background-color: #45a049;}</style>
</head>
<body><div id="signatureArea"></div><button id="clearButton">清除</button><button id="saveButton">保存签名</button><script type="text/javascript">
// 获取DOM元素
var signatureArea = document.getElementById('signatureArea');
var clearButton = document.getElementById('clearButton');
var saveButton = document.getElementById('saveButton');// 定义变量
var isDrawing = false; // 是否正在绘制
var lastX, lastY; // 上一个触摸点的坐标// 创建两个canvas元素
var drawingCanvas = document.createElement('canvas'); // 用于绘制签名
var backgroundCanvas = document.createElement('canvas'); // 用于保存带有白色背景的签名图像
var drawingCtx = drawingCanvas.getContext('2d');
var backgroundCtx = backgroundCanvas.getContext('2d');
drawingCanvas.width = signatureArea.offsetWidth;
drawingCanvas.height = signatureArea.offsetHeight;
backgroundCanvas.width = drawingCanvas.width;
backgroundCanvas.height = drawingCanvas.height;// 绑定触摸事件
signatureArea.addEventListener('touchstart', startDrawing);
signatureArea.addEventListener('touchmove', draw);
signatureArea.addEventListener('touchend', stopDrawing);
clearButton.addEventListener('click', clearSignature);
saveButton.addEventListener('click', saveSignature);// 开始绘制
function startDrawing(e) {e.preventDefault();var touch = e.touches[0];var rect = signatureArea.getBoundingClientRect();lastX = touch.clientX - rect.left;lastY = touch.clientY - rect.top;isDrawing = true;
}// 绘制中
function draw(e) {if (!isDrawing) return;var touch = e.touches[0];var rect = signatureArea.getBoundingClientRect();var x = touch.clientX - rect.left;var y = touch.clientY - rect.top;drawLine(lastX, lastY, x, y);lastX = x;lastY = y;
}// 停止绘制
function stopDrawing() {isDrawing = false;
}// 绘制实线
function drawLine(x1, y1, x2, y2) {drawingCtx.beginPath();drawingCtx.moveTo(x1, y1);drawingCtx.lineTo(x2, y2);drawingCtx.lineWidth = 1;drawingCtx.strokeStyle = '#000';drawingCtx.stroke();
}// 清除签名
function clearSignature() {drawingCtx.clearRect(0, 0, drawingCanvas.width, drawingCanvas.height);backgroundCtx.clearRect(0, 0, backgroundCanvas.width, backgroundCanvas.height);
}// 保存签名
function saveSignature() {// 绘制白色背景backgroundCtx.fillStyle = 'white';backgroundCtx.fillRect(0, 0, backgroundCanvas.width, backgroundCanvas.height);// 复制绘制的签名到带有白色背景的画布backgroundCtx.drawImage(drawingCanvas, 0, 0);// 将带有白色背景的画布内容转为PNG格式的DataURLvar dataURL = backgroundCanvas.toDataURL("image/png");// 创建一个链接元素并设置下载属性var link = document.createElement('a');link.href = dataURL;link.download = '签名.png'; // 设置下载文件的名称// 检查是否支持保存到相册if ("download" in link) {link.style.display = "none";document.body.appendChild(link);link.click();document.body.removeChild(link);} else {// 如果不支持保存到相册，你可以提供其他方式或提示用户手动保存alert("无法直接保存到相册，请手动保存签名图片。");}
}// 将canvas元素插入DOM树中
signatureArea.appendChild(drawingCanvas);</script>
</body>
</html>