手機上的效果圖
![image](https://img2024.cnblogs.com/blog/1534761/202407/1534761-20240718184014963-2009307692.png)
需要注意,手機觸控和滑鼠不是一個事件,不能通用,上一篇是關於使用滑鼠的樣例
相關程式碼
<!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; // 如果沒有觸控,則退出函式
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);
// 將圖片資料轉換成 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>