填滿色彩

在點擊畫布時，使用 fillStyle 先填上顏色，再覆蓋整個畫布

/**
* 滑鼠點下畫布後開始畫畫 or 填滿
*/
const handleMouseDown = () => {
  setIsDrawing(true);
  if (tool === "fillColor") {
    fillCanvas();
  }
};

/**
* 填滿色彩
*/
const fillCanvas = () => {
  const ctx = canvasRef.current.getContext("2d");
  ctx.fillStyle = activeColor;
  ctx.fillRect(0, 0, 500, 500);
};

橡皮擦

與畫筆操作相似，不過使用的是 clearRect，操作更簡易

  ctx.clearRect(x, y, width, height);

第一個與第二個參數為需要清除的位置，第三四個為尺寸。

const handleDrawCanvas = (point: { x: number; y: number }) => {
  const ctx = canvasRef.current.getContext("2d");
  switch (tool) {
    case "eraser": // 橡皮擦
      ctx.clearRect(point?.x, point?.y, 10, 10);
      break;
    case "pencil":
     // 同上方畫筆
  }
  pointsArray = [...pointsArray, point];
};

檢視

最後呈現本篇章功能～

https://i.imgur.com/rxoup1T.gif