手写输入

2024-11-25 09:56:02

html文件

<!DOCTYPE html>

<head>

<title>Signature Pad</title>

<style>

canvas {

border: 1px solid #000;

width: 100%;

max-width: 600px;

height: 300px;

}

button {

margin-top: 10px;

}

</style>

</head>

<body>

<h1>Signature Pad</h1>

<br>

</body>

</html>

js文件

// 获取Canvas元素和2D绘图上下文

const canvas = document.getElementById('signatureCanvas');

const ctx = canvas.getContext('2d');

// 设定Canvas尺寸

canvas.width = canvas.offsetWidth;

canvas.height = canvas.offsetHeight;

// 初始化绘图状态

let drawing = false;

let lastX = 0;

let lastY = 0;

// 开始绘制

canvas.addEventListener('mousedown', (e) => {

drawing = true;

[lastX, lastY] = [e.offsetX, e.offsetY];

});

canvas.addEventListener('mousemove', (e) => {

if (!drawing) return;

ctx.beginPath();

ctx.moveTo(lastX, lastY);

ctx.lineTo(e.offsetX, e.offsetY);

ctx.stroke();

[lastX, lastY] = [e.offsetX, e.offsetY];

});

canvas.addEventListener('mouseup', () => drawing = false);

canvas.addEventListener('mouseout', () => drawing = false);

// 移动端支持

canvas.addEventListener('touchstart', (e) => {

drawing = true;

const touch = e.touches[0];

const rect = canvas.getBoundingClientRect();

[lastX, lastY] = [touch.clientX - rect.left, touch.clientY - rect.top];

});

canvas.addEventListener('touchmove', (e) => {

if (!drawing) return;

const touch = e.touches[0];

const rect = canvas.getBoundingClientRect();

ctx.beginPath();

ctx.moveTo(lastX, lastY);

ctx.lineTo(touch.clientX - rect.left, touch.clientY - rect.top);

ctx.stroke();

[lastX, lastY] = [touch.clientX - rect.left, touch.clientY - rect.top];

});

canvas.addEventListener('touchend', () => drawing = false);

// 清除Canvas

document.getElementById('clearButton').addEventListener('click', () => {

ctx.clearRect(0, 0, canvas.width, canvas.height);

});

// 保存签名为图片

document.getElementById('saveButton').addEventListener('click', () => {

const dataURL = canvas.toDataURL('image/png');

const img = document.getElementById('savedImage');

img.src = dataURL;

$("#qm").val(dataURL);

img.style.display = 'block';

});

上一篇：打印iframe 页面

下一篇：纯CSS实现立体纸张折叠动效

随机文章