<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>手机签名</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
canvas {
border: 1px solid #000;
touch-action: none;width:100%;
}
</style>
</head>
<body>
<canvas id="hdhcmssignname" width="300" height="150"></canvas>
<br>
<div align="center">
<button id="clear">清除</button>
<button id="save">保存</button>
</div>
<div id="hdhcmsimg"></div>
<script>
const canvas = document.getElementById('hdhcmssignname');
const ctx = canvas.getContext('2d');
let isDrawing = false;
let lastX = 0;
let lastY = 0;
function draw(e) {
if (!isDrawing) return;
ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(e.touches[0].clientX, e.touches[0].clientY);
ctx.stroke();
[lastX, lastY] = [e.touches[0].clientX, e.touches[0].clientY];
}
canvas.addEventListener('touchstart', (e) => {
isDrawing = true;
[lastX, lastY] = [e.touches[0].clientX, e.touches[0].clientY];
});
canvas.addEventListener('touchmove', draw);
canvas.addEventListener('touchend', () => {
isDrawing = false;
});
document.getElementById('clear').addEventListener('click', () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
});
document.getElementById('save').addEventListener('click', () => {
const dataURL = canvas.toDataURL('image/png');
// 使用这个dataURL做其他操作，比如下载或者上传
document.getElementById("hdhcmsimg").innerHTML="<img src='"+dataURL+"'>";
console.log(dataURL);
});
</script>
</body>
</html>