前端H5用Canvas画布做类似银行签名的操作

news2024/11/26 9:33:38

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>签名页面</title>
</head>
<body>
<canvas id="signatureCanvas" width="400" height="200"></canvas>
<button id="clearButton">清除签名</button>
<button id="saveButton">保存签名</button>
<img id="signatureImage" src="" alt="签名预览">
<script src="js/signatureCanvas.js"></script>
</body>
</html>

// 获取Canvas元素
const canvas = document.getElementById("signatureCanvas");
const ctx = canvas.getContext("2d");

// 设置绘制参数
ctx.strokeStyle = "#000"; // 线条颜色
ctx.lineWidth = 2; // 线条宽度

// 标记签名是否开始
let drawing = false;

// 监听鼠标按下事件
canvas.addEventListener("mousedown", (e) => {
    drawing = true;
    ctx.beginPath();
    ctx.moveTo(e.clientX - canvas.getBoundingClientRect().left, e.clientY - canvas.getBoundingClientRect().top);
});

// 监听鼠标移动事件
canvas.addEventListener("mousemove", (e) => {
    if (drawing) {
        ctx.lineTo(e.clientX - canvas.getBoundingClientRect().left, e.clientY - canvas.getBoundingClientRect().top);
        ctx.stroke();
    }
});

// 监听鼠标松开事件
canvas.addEventListener("mouseup", () => {
    drawing = false;
});

// 清除签名
document.getElementById("clearButton").addEventListener("click", () => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    document.getElementById("signatureImage").src = "";
});

// 保存签名
document.getElementById("saveButton").addEventListener("click", () => {
    const signatureImage = document.getElementById("signatureImage");
    signatureImage.src = canvas.toDataURL("image/png");
});

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1162487.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！