用canvas實現手寫簽名功能

最近開發網站有一個需求，要求頁面上有一塊區域，用戶能用鼠標在上面寫字，並能保存成圖片 base64 碼放在服務器。
這樣的需求用 canvas 實現是最好的。
需要用到 canvas 的以下幾個屬性：

• beginPath 創建一個新的路徑
• globalAlpha 設置圖形和圖片透明度的屬性
• lineWidth 設置線段厚度的屬性（即線段的寬度）
• strokeStyle 描述畫筆（繪制圖形）顏色或者樣式的屬性，默認值是 #000 (black)
• moveTo(x, y) 將一個新的子路徑的起始點移動到(x，y)坐標的方法
• lineTo(x, y) 使用直線連接子路徑的終點到x，y坐標的方法（並不會真正地繪制）
• closePath 它嘗試從當前點到起始點繪制一條直線
• stroke 它會實際地繪制出通過 moveTo() 和 lineTo() 方法定義的路徑，默認顏色是黑色

除了用到這些屬性外，還需要監聽鼠標點擊和鼠標移動事件。

廢話就不多說了， DEMO。

我對代碼做了擴展，除了支持畫筆，還支持噴槍、刷子、橡皮擦功能。

canvas 轉成圖片

將 canvas 轉成圖片，需要用到以下屬性：

• toDataURL

canvas.toDataURL() 方法返回一個包含圖片展示的 data URI 。可以使用 type 參數其類型，默認為 PNG 格式。圖片的分辨率為96dpi。

    const image = new Image()
    // canvas.toDataURL 返回的是一串Base64編碼的URL
    image.src = canvas.toDataURL("image/png")