极客观点
项目管理
HarmonyOS
以下是我的一个demo，想问问还有没有大神有其他实现方案
<!DOCTYPE html>
<html>
<head>
<title>在线签名</title>
</head>
<body>
<canvas id="signatureCanvas" width="400" height="200" style="border: 1px solid #000;"></canvas>
<button id="clearButton">清除签名</button>
<button id="saveButton">保存签名</button>
<script>
// 获取canvas元素
const canvas = document.getElementById('signatureCanvas');
const ctx = canvas.getContext('2d');
// 设置画笔属性
ctx.lineWidth = 2;
ctx.strokeStyle = 'black';
// 初始化签名状态
let isDrawing = false;
let lastX = 0;
let lastY = 0;
// 鼠标按下时开始签名
canvas.addEventListener('mousedown', (e) => {
isDrawing = true;
[lastX, lastY] = [e.offsetX, e.offsetY];
});
// 鼠标移动时绘制签名
canvas.addEventListener('mousemove', draw);
// 鼠标抬起时停止签名
canvas.addEventListener('mouseup', () => isDrawing = false);
canvas.addEventListener('mouseout', () => isDrawing = false);
// 清除签名
const clearButton = document.getElementById('clearButton');
clearButton.addEventListener('click', () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
});
// 保存签名（生成签名图片）
const saveButton = document.getElementById('saveButton');
saveButton.addEventListener('click', () => {
const signatureImage = new Image();
signatureImage.src = canvas.toDataURL();
document.body.appendChild(signatureImage);
});
// 绘制函数
function draw(e) {
if (!isDrawing) return;
ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(e.offsetX, e.offsetY);
ctx.stroke();
[lastX, lastY] = [e.offsetX, e.offsetY];
}
</script>
</body>
</html>
html5
可以用sign-canvas插件实现