前端使用Canvas实现网页电子签名(兼容移动端和PC端)
实现效果：
要使用Canvas实现移动端网页电子签名，可以按照以下步骤：
在HTML文件中创建一个Canvas元素，并设置其宽度和高度，以适配移动设备的屏幕大小。
// 创建一个canvas元素
let canvas = document.createElement("canvas");
// 设置canvas元素的宽度和高度
canvas.width = 300;
canvas.height = 200;在JavaScript文件中获取Canvas元素，并获取其上下文对象。
let ctx = canvas.getContext('2d');
设置绘制路径的样式，包括颜色、宽度等。
ctx.strokeStyle = '#000000'; // 设置绘制线条的颜色为黑色
ctx.lineWidth = 2; // 设置绘制线条的宽度为2像素
监听移动设备的触摸事件，在触摸事件的回调函数中获取触摸点的坐标，并使用Canvas绘制路径。
var isDrawing = false; // 是否正在绘制路径canvas.addEventListener('touchstart', function(e) {isDrawing = true;var touch = e.touches[0];var x = touch.pageX - canvas.offsetLeft;var y = touch.pageY - canvas.offsetTop;ctx.beginPath(); // 开始绘制路径ctx.moveTo(x, y); // 移动到起始点
});canvas.addEventListener('touchmove', function(e) {if (isDrawing) {var touch = e.touches[0];var x = touch.pageX - canvas.offsetLeft;var y = touch.pageY - canvas.offsetTop;ctx.lineTo(x, y); // 绘制直线到当前点ctx.stroke(); // 绘制路径}
});canvas.addEventListener('touchend', function(e) {isDrawing = false;
});
可以添加其他功能，如清除画布、保存签名等。
const startDrawing = (e) => {isDrawing = true;const { clientX, clientY } = e.touches ? e.touches[0] : e;const x = clientX - canvas.offsetLeft;const y = clientY - canvas.offsetTop;ctx.beginPath(); // 开始绘制路径ctx.moveTo(x, y); // 移动到起始点
};const draw = (e) => {if (isDrawing) {const { clientX, clientY } = e.touches ? e.touches[0] : e;const x = clientX - canvas.offsetLeft;const y = clientY - canvas.offsetTop;ctx.lineTo(x, y); // 绘制直线到当前点ctx.stroke(); // 绘制路径}
};const stopDrawing = () => {isDrawing = false;
};// 添加触摸事件
canvas.addEventListener("touchstart", startDrawing);
canvas.addEventListener("touchmove", draw);
canvas.addEventListener("touchend", stopDrawing);// 添加鼠标事件
canvas.addEventListener("mousedown", startDrawing);
canvas.addEventListener("mousemove", draw);
canvas.addEventListener("mouseup", stopDrawing);以上就是使用Canvas实现移动端网页电子签名的基本步骤。你可以根据自己的需求进行进一步的扩展和优化。
下面给出完整代码：
<!DOCTYPE html>
<html><head><title>Canvas头像</title></head><body><button onclick="saveSignature()">保存</button><button onclick="clearCanvas()">清除</button><script>let canvas = null;let ctx = null;let isDrawing = false; // 是否正在绘制路径(function initCanvas() {// 创建一个canvas元素canvas = document.createElement("canvas");// 设置canvas元素的宽度和高度canvas.width = 300;canvas.height = 200;// 将canvas元素添加到body元素中document.body.appendChild(canvas);// 获取canvas元素的上下文对象ctx = canvas.getContext("2d");ctx.strokeStyle = "#000000"; // 设置绘制线条的颜色为黑色ctx.lineWidth = 2; // 设置绘制线条的宽度为2像素const startDrawing = (e) => {isDrawing = true;const { clientX, clientY } = e.touches ? e.touches[0] : e;const x = clientX - canvas.offsetLeft;const y = clientY - canvas.offsetTop;ctx.beginPath(); // 开始绘制路径ctx.moveTo(x, y); // 移动到起始点};const draw = (e) => {if (isDrawing) {const { clientX, clientY } = e.touches ? e.touches[0] : e;const x = clientX - canvas.offsetLeft;const y = clientY - canvas.offsetTop;ctx.lineTo(x, y); // 绘制直线到当前点ctx.stroke(); // 绘制路径}};const stopDrawing = () => {isDrawing = false;};// 添加触摸事件canvas.addEventListener("touchstart", startDrawing);canvas.addEventListener("touchmove", draw);canvas.addEventListener("touchend", stopDrawing);// 添加鼠标事件canvas.addEventListener("mousedown", startDrawing);canvas.addEventListener("mousemove", draw);canvas.addEventListener("mouseup", stopDrawing);})();// 清除画布function clearCanvas() {ctx.clearRect(0, 0, canvas.width, canvas.height);}// 保存签名为图片function saveSignature() {const imageData = canvas.toDataURL(); // 将Canvas内容转换为图片数据const link = document.createElement("a");link.href = imageData;link.download = "signature.png"; // 设置下载图片的文件名link.click(); // 模拟点击下载链接}</script></body>
</html>