手寫簽名功能可通過JS結合canvas實現，核心步驟為監聽鼠標或觸摸事件并繪制軌跡。具體包括：1. 監聽mousedown/touchstart開始繪制，moveto記錄起始點；2. 監聽mousemove/touchmove持續繪制線條，使用lineto連接坐標點；3. stroke方法描邊路徑；4. mouseup/touchend結束繪制；5. 設置linewidth和strokestyle調整筆觸樣式；6. 添加清空按鈕調用clearrect方法清除畫布；7. 通過todataurl生成圖片鏈接實現保存功能；8. 使用requestanimationframe和貝塞爾曲線優化繪制體驗；9. 移動端需額外處理觸摸事件及坐標轉換。
手寫簽名，聽起來挺酷的，對吧？其實用JS結合Canvas就能搞定，核心就是監聽鼠標事件，然后在Canvas上繪制線條。別覺得難，一步一步來，你會發現其實挺有意思的。
Canvas手寫簽名，主要步驟就是：監聽鼠標按下、移動、抬起事件，然后把鼠標移動的軌跡記錄下來，在Canvas上畫出來就行了。
如何在Canvas上繪制線條？
Canvas繪制線條，主要用到beginPath()、moveTo()、lineTo()、stroke()這幾個方法。
- beginPath()：開始一個新的路徑。
- moveTo(x, y)：將畫筆移動到指定的坐標(x, y)。
- lineTo(x, y)：從當前畫筆位置繪制一條直線到指定的坐標(x, y)。
- stroke()：使用當前的樣式繪制路徑。
所以，核心代碼大概是這樣：
const canvas = document.getElementById('signatureCanvas'); const ctx = canvas.getContext('2d'); let isDrawing = false; canvas.addEventListener('mousedown', (e) => { isDrawing = true; ctx.beginPath(); ctx.moveTo(e.offsetX, e.offsetY); }); canvas.addEventListener('mousemove', (e) => { if (!isDrawing) return; ctx.lineTo(e.offsetX, e.offsetY); ctx.stroke(); }); canvas.addEventListener('mouseup', () => { isDrawing = false; }); canvas.addEventListener('mouseout', () => { isDrawing = false; });
這段代碼就是監聽鼠標事件，當鼠標按下時，開始繪制路徑；鼠標移動時，繪制線條；鼠標抬起或移出Canvas時，停止繪制。 很簡單吧？
如何調整筆觸的粗細和顏色？
默認的線條太細，顏色也可能不太好看，可以調整ctx.lineWidth和ctx.strokeStyle屬性。
比如，把線條調粗一點，顏色改成藍色：
ctx.lineWidth = 5; ctx.strokeStyle = 'blue';
把這兩行代碼加到mousedown事件的處理函數里，每次開始繪制的時候，都會使用新的樣式。
如何實現清空簽名？
加一個清空按鈕，點擊按鈕的時候，把Canvas的內容清空。
<button id="clearButton">清空</button>
const clearButton = document.getElementById('clearButton'); clearButton.addEventListener('click', () => { ctx.clearRect(0, 0, canvas.width, canvas.height); });
clearRect(0, 0, canvas.width, canvas.height)就是把Canvas的指定區域清空，這里清空的是整個Canvas。
如何保存簽名？
保存簽名，其實就是把Canvas的內容轉換成圖片，然后下載下來。
<button id="saveButton">保存</button>
const saveButton = document.getElementById('saveButton'); saveButton.addEventListener('click', () => { const dataURL = canvas.toDataURL('image/png'); const link = document.createElement('a'); link.href = dataURL; link.download = 'signature.png'; document.body.appendChild(link); link.click(); document.body.removeChild(link); });
canvas.toDataURL(‘image/png’)就是把Canvas的內容轉換成PNG格式的Data URL，然后創建一個鏈接，設置鏈接的href為Data URL，設置鏈接的download屬性為文件名，點擊鏈接就可以下載圖片了。
如何優化手寫簽名的體驗？
手寫簽名，體驗很重要。如果線條太僵硬，或者延遲太高，用戶體驗就會很差。
- 減少延遲： 可以使用requestAnimationFrame來優化繪制過程，減少延遲。
- 平滑線條： 可以使用貝塞爾曲線來平滑線條，讓簽名看起來更自然。
- 增加壓力感應： 如果設備支持壓力感應，可以根據壓力的大小來調整線條的粗細，模擬真實的手寫效果。
這些優化都需要更復雜的算法和代碼，但如果想做出一個高質量的手寫簽名組件，這些都是值得考慮的。
移動端如何實現手寫簽名？
移動端和PC端的手寫簽名實現原理是一樣的，只是事件類型不一樣。PC端用的是mousedown、mousemove、mouseup，移動端用的是touchstart、touchmove、touchend。
所以，只需要把事件監聽器改成觸摸事件就可以了：
canvas.addEventListener('touchstart', (e) => { isDrawing = true; ctx.beginPath(); ctx.moveTo(e.touches[0].clientX - canvas.offsetLeft, e.touches[0].clientY - canvas.offsetTop); }); canvas.addEventListener('touchmove', (e) => { if (!isDrawing) return; ctx.lineTo(e.touches[0].clientX - canvas.offsetLeft, e.touches[0].clientY - canvas.offsetTop); ctx.stroke(); }); canvas.addEventListener('touchend', () => { isDrawing = false; });
注意，移動端的坐標需要減去Canvas的偏移量，才能得到正確的坐標。
