用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")
複製代碼