目录
1.HTML模板
2.获取DOM元素和定义变量
3.创建两个canvas元素,并设置它们的宽度和高度
4.绑定触摸事件:touchstart, touchmove, touchend和click
5.实现触摸事件回调函数:startDrawing, draw和stopDrawing
6.实现绘制线段的函数:drawLine
7.实现清除签名的函数:clearSignature
8.实现保存签名的函数:saveSignature
9.将canvas元素插入DOM树中
10.完整代码
11.效果图
1.HTML模板
<!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格式的DataURL
var 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格式的DataURL
var 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>
11.效果图
文章来源:https://www.toymoban.com/news/detail-794243.html
文章来源地址https://www.toymoban.com/news/detail-794243.html
到了这里,关于JavaScript实现手写签名,可触屏手写,支持移动端与PC端双端保存的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!