电子签名的写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#cvs {
background-color: #000;
background: #000;
}
body {
height: 100vh;
background-color: rgb(26, 25, 25);
}
</style>
</head>
<body>
<canvas id="cvs"></canvas>
<div style="margin-top: 50px">
<button id="clear">清空</button>
<button id="back">回退</button>
<button id="save">保存</button>
</div>
</body>
<script>
let width = 800
let height = 400
let isDownin = false
let lastX = 0
let lastY = 0
let cacheData = []
const cvs = document.getElementById('cvs')
const ctx = cvs.getContext('2d')
cvs.width = width
cvs.height = height
cvs.addEventListener('mousedown', (e) => {
isDownin = true
lastX = e.pageX;
lastY = e.pageY;
let cacheItem = ctx.getImageData(0, 0, width, height);
cacheData.push(cacheItem)
ctx.moveTo(lastX, lastY)
})
cvs.addEventListener('mousemove', (e) => {
if (!isDownin) return
drawLine(e.pageX, e.pageY)
ctx.stroke()
})
cvs.addEventListener('mouseup', (e) => {
isDownin = false
})
function drawLine(x, y) {
ctx.beginPath();
ctx.lineWidth = 8;
ctx.strokeStyle = '#fff';
ctx.lineCap = 'round'
ctx.lineJoin = "round";
ctx.moveTo(lastX, lastY);
ctx.lineTo(x, y);
ctx.stroke();
lastX = x;
lastY = y;
}
/* 清空 */
const clear = document.getElementById('clear')
clear.onclick = () => {
ctx.clearRect(0, 0, width, height)
}
/* 回退 */
const back = document.getElementById('back')
back.onclick = () => {
if (cacheData.length === 0) return;
ctx.putImageData(cacheData.pop(), 0, 0);
}
const save = document.getElementById('save')
save.onclick = () => {
cvs.toBlob((blob) => {
const a = document.createElement('a');
document.body.append(a);
a.download = `签名.png`;
a.href = URL.createObjectURL(blob);
a.click();
a.remove();
});
}
</script>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通