SOURCE

const canvas = document.getElementById('signatureCanvas');
const ctx = canvas.getContext('2d');
const mobileStatus = (/Mobile|Android|iPhone/i.test(navigator.userAgent))

let isDrawing = false;
let lastX, lastY;

// 鼠标按下事件
function handleMouseDown(e) {
    isDrawing = true;
    let event2 = mobileStatus ? e.changedTouches[0] : e;
    [lastX, lastY] = [event2.clientX - canvas.offsetLeft, event2.clientY - canvas.offsetTop];
}

// 鼠标移动事件
function handleMouseMove(e) {
    if (!isDrawing) return; // 如果鼠标没有按下，则退出函数
    let event2 = mobileStatus ? e.changedTouches[0] : e;

    const x = event2.clientX - canvas.offsetLeft;
    const y = event2.clientY - canvas.offsetTop;

    ctx.beginPath();
    ctx.moveTo(lastX, lastY);
    ctx.lineTo(x, y);
    ctx.stroke();

    [lastX, lastY] = [x, y];
}

// 鼠标释放事件
function handleMouseUp() {
    isDrawing = false;
}

// 清除签名
function clearSignature() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}

// 保存签名
function saveSignature() {
    const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);

    // 将图片数据转换成 base64 格式
    const base64ImageData = canvas.toDataURL();
    console.log(base64ImageData);
}



console.log(mobileStatus)

// 绑定事件
canvas.addEventListener(mobileStatus ? "touchstart" : 'mousedown', handleMouseDown);
canvas.addEventListener(mobileStatus ? "touchmove" : 'mousemove', handleMouseMove);
canvas.addEventListener(mobileStatus ? "touchend" : 'mouseup', handleMouseUp);

<div>
  <canvas id="signatureCanvas" width="300" height="200"></canvas>
  <button onclick="clearSignature()">清除</button>
  <button onclick="saveSignature()">保存</button>
</div>