手機上的效果圖
需要注意，手機觸摸和鼠標不是一個事件，不能通用，上一篇是關于使用鼠標的樣例
相關代碼
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.buttons {margin-top: 10px;}</style>
</head><body><div><canvas id="signatureCanvas" width="500" height="200" style="border:solid;"></canvas><button onclick="clearSignature()">清除</button><button onclick="undoLast()">清除上一步</button><button onclick="saveSignature()">保存</button></div><script>const canvas = document.getElementById('signatureCanvas');const ctx = canvas.getContext('2d');let isDrawing = false;let lastX, lastY;let strokes = []; // 用于存儲每一步的繪制操作// 觸摸開始事件function handleTouchStart(e) {e.preventDefault(); // 阻止默認的觸摸事件isDrawing = true;[lastX, lastY] = [e.touches[0].clientX - canvas.offsetLeft, e.touches[0].clientY - canvas.offsetTop];strokes.push([]); // 開始新的筆畫}// 觸摸移動事件function handleTouchMove(e) {e.preventDefault(); // 阻止默認的觸摸事件if (!isDrawing) return; // 如果沒有觸摸，則退出函數(shù)const x = e.touches[0].clientX - canvas.offsetLeft;const y = e.touches[0].clientY - canvas.offsetTop;ctx.beginPath();ctx.moveTo(lastX, lastY);ctx.lineTo(x, y);ctx.stroke();strokes[strokes.length - 1].push({ x: lastX, y: lastY, x2: x, y2: y }); // 記錄當前筆畫[lastX, lastY] = [x, y];}// 觸摸結束事件function handleTouchEnd(e) {e.preventDefault(); // 阻止默認的觸摸事件isDrawing = false;}// 清除簽名function clearSignature() {ctx.clearRect(0, 0, canvas.width, canvas.height);strokes = []; // 清空所有筆畫記錄}// 撤銷上一步function undoLast() {strokes.pop(); // 移除最后一個筆畫redraw(); // 重新繪制畫布}// 重新繪制畫布function redraw() {ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空畫布strokes.forEach(stroke => {stroke.forEach(line => {ctx.beginPath();ctx.moveTo(line.x, line.y);ctx.lineTo(line.x2, line.y2);ctx.stroke();});});}// 保存簽名function saveSignature() {const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);// 將圖片數(shù)據(jù)轉換成 base64 格式const base64ImageData = canvas.toDataURL();console.log(base64ImageData);}// 綁定事件canvas.addEventListener('touchstart', handleTouchStart);canvas.addEventListener('touchmove', handleTouchMove);canvas.addEventListener('touchend', handleTouchEnd);canvas.addEventListener('touchcancel', handleTouchEnd);</script>
</body></html>
