如何實作出透過CANVAS實作出一個電子簽名
首先，我們在HTML中建立一個 <canvas> 元素，用於繪製簽名。我們使用 CSS 將這個元素的邊框設置為 1 像素的黑色邊框。
` <style>
#signatureCanvas {
border: 1px solid #000;
}
#clearBtn {
margin-top: 10px;
}
</style>`
在 JavaScript 的程式碼部分，我們首先獲取了 <canvas> 元素和其對應的 2D 渲染上下文 (ctx)，這個上下文提供了一些繪圖方法供我們使用。
const canvas = document.getElementById(‘signatureCanvas’);
// 獲取 2D 渲染上下文
const ctx = canvas.getContext('2d');
為了記錄滑鼠的繪圖過程，我們建立了幾個變數。isDrawing 用於追蹤繪圖是否正在進行，lastX 和 lastY 用於記錄上一個滑鼠位置。
// 設定繪製起始狀態
let isDrawing = false;
let lastX = 0;
let lastY = 0;
我們定義了三個函式來處理滑鼠事件：startDrawing、draw 和 stopDrawing。當滑鼠按下時，startDrawing 函式被調用，它將 isDrawing 設置為 true，並記錄滑鼠的起始位置。當滑鼠移動時，draw 函式被調用，它根據滑鼠位置繪製線條，並將 lastX 和 lastY 更新為當前位置。當滑鼠放開或離開 <canvas> 元素時，stopDrawing 函式被調用，將 isDrawing 設置為 false。
`// 開始繪製函式，設定 isDrawing 為 true，並記錄滑鼠位置
function startDrawing(e) {
isDrawing = true;
[lastX, lastY] = [e.offsetX, e.offsetY];
}
// 繪製函式，如果 isDrawing 為 true，則根據滑鼠位置繪製線條
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];
}
// 停止繪製函式，設定 isDrawing 為 false
function stopDrawing() {
isDrawing = false;
}`
最後，我們為提交按鈕和清除按鈕添加了點擊事件監聽器。當提交按鈕被點擊時，我們使用 canvas.toDataURL() 將簽名轉換為圖像數據URL，你可以將該圖像數據提交給後端或進行其他處理。當清除按鈕被點擊時，我們調用 clearCanvas 函式清除簽名。
// 清除 canvas 的函式，使用 clearRect() 方法清除整個畫布
function clearCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
總結來說，這段程式碼通過監聽滑鼠事件和使用 HTML5 的 <canvas> 元素，實現了一個簡單的電子簽名功能。使用者可以通過滑鼠在 <canvas> 元素上繪製簽名，並可以提交簽名或清除簽名。