canvas實現簡易簽字板

阿新 • • 發佈：2021-12-24

最近看到有些線上文件可以進行簽名，以防以後專案中會用到，提前用canvas練習一下，先看下最後實現的效果：

思路

在canva中監聽滑鼠按下事件（mousedown），獲取按下時滑鼠到canvas左上角的距離
以滑鼠按下的點為canvas畫筆的起點，監聽滑鼠移動事件（mousemove），根據滑鼠移動到的位置實時繪製線條
監聽滑鼠彈起事件（mouseup），移除對mousemove事件的監聽，防止滑鼠彈起繼續繪製

搭建html結構

html結構比較簡單，直接使用一個canvas標籤，設定其背景色，寬度和高度。背景色是為了方便看效果，寬度預設300px，高度預設150px，設定寬高時不用帶單位px

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>簡易簽名板</title>
</head>

<body>
    <canvas style="background-color: skyblue;" id="canvas" width="400" height="200"></canvas>

    <script src="./canvas.js"></script>
</body>

</html>

在canvas.js中實現功能

獲取canvas物件，獲取2D畫筆

const canvas = document.querySelector('#canvas')
if (canvas.getContext) {
  const ctx = canvas.getContext('2d');
}

根據滑鼠移動繪製路徑

// 監聽滑鼠按下事件
canvas.onmousedown = function(mousedownEvent) {
  // 獲取繪製起點，即滑鼠點選到canvas元素左上角的距離
  const startX = mousedownEvent.offsetX;
  const startY = mousedownEvent.offsetY;
  ctx.beginPath();
  // 將畫筆移動到起點
  ctx.moveTo(startX, startY);

  // 監聽滑鼠移動事件
  canvas.onmousemove = function(mousemoveEvent) {
    // 跟隨滑鼠移動來移動畫筆
    ctx.lineTo(mousemoveEvent.offsetX, mousemoveEvent.offsetY);
    // 實時繪製
    ctx.stroke();
  }

  // 監聽滑鼠彈起事件
  canvas.onmouseup = function() {
    canvas.onmousemove = null
    // 閉合路徑，使用之後線條起點和終點會自動連起來
    // ctx.closePath();
    // 滑鼠彈起時再繪製
    // ctx.stroke();
  }

  // 監聽滑鼠移出canvas區域事件
  canvas.onmouseout = function() {
    // 滑鼠移出時，停止對mousemove事件的監聽，否則在移出時滑鼠彈起事件監聽失效
    canvas.onmousemove = null
  }
}

注意點clientX/Y和offsetX/Y

擴充套件：將canvas轉化為圖片

方法一：使用HTMLCanvasElement.toDataURL()獲取canvas圖片的dataURL
方法二：使用HTMLCanvasElement.toBlob()建立Blob物件，再使用URL.createObjectURL()獲取指向該Blob物件的URL

// 按鈕點選事件
btn.onclick = function() {
  // 方法一
  const canvasData = canvas.toDataURL()
  const img = document.createElement('img')
  img.src=canvasData;
  body.appendChild(img)

  // 方法二
  // canvas.toBlob(function(blob) {
  //   var url = URL.createObjectURL(blob);
  //   const img = document.createElement('img')
  //   img.src=url;
  //   // 圖片載入成功後清除url，避免佔用記憶體
  //   img.onload = function() {
  //     URL.revokeObjectURL(url)
  //   };
  //   body.appendChild(img)
  // })
}