用canvas實現手寫簽名功能
摘要：
最近開發網站有一個需求，要求頁面上有一塊區域，使用者能用滑鼠在上面寫字，並能儲存成圖片 base64 碼放在伺服器。
這樣的需求用 canvas 實現是最好的。
需要用到 canvas 的以下幾個屬性：
beginPath 建立一個新的路徑
gl...
最近開發網站有一個需求，要求頁面上有一塊區域，使用者能用滑鼠在上面寫字，並能儲存成圖片 base64 碼放在伺服器。
這樣的需求用 canvas 實現是最好的。
需要用到 canvas 的以下幾個屬性：
- beginPath 建立一個新的路徑
- globalAlpha 設定圖形和圖片透明度的屬性
- lineWidth 設定線段厚度的屬性（即線段的寬度）
- strokeStyle 描述畫筆（繪製圖形）顏色或者樣式的屬性，預設值是 #000 (black)
- moveTo(x, y)將一個新的子路徑的起始點移動到(x，y)座標的方法
- lineTo(x, y) 使用直線連線子路徑的終點到x，y座標的方法（並不會真正地繪製）
- closePath 它嘗試從當前點到起始點繪製一條直線
- stroke 它會實際地繪製出通過 moveTo() 和 lineTo() 方法定義的路徑，預設顏色是黑色
除了用到這些屬性外，還需要監聽滑鼠點選和滑鼠移動事件。
我對程式碼做了擴充套件，除了支援畫筆，還支援噴槍、刷子、橡皮擦功能。
canvas 轉成圖片
將 canvas 轉在圖片，需要用到以下屬性：
- toDataURL
canvas.toDataURL() 方法返回一個包含圖片展示的 data URI 。可以使用 type 引數其型別，預設為 PNG 格式。圖片的解析度為96dpi。
const image = new Image()
// canvas.toDataURL 返回的是一串Base64編碼的URL
image.src = canvas.toDataURL("image/png")