Day 4 - 用 canvas 复刻 小画家 填入色彩, 橡皮擦

填满色彩

在点击画布时，使用 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