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

最新推荐文章于 2024-05-22 16:14:07 发布

桃花妖殿下

最新推荐文章于 2024-05-22 16:14:07 发布

阅读量291

点赞数 1

分类专栏：前端文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_37241221/article/details/134180061

版权

前端专栏收录该内容

30 篇文章 0 订阅

订阅专栏

<!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");
});