iT邦幫忙

2021 iThome 鐵人賽

DAY 4
0
Modern Web

Canvas 小錦囊系列 第 4

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


上一篇
Day 3 - 用 canvas 復刻 小畫家 畫筆
下一篇
Day 5 - 用 canvas 復刻 小畫家 挑選顏色(顏色選取器)
系列文
Canvas 小錦囊30

尚未有邦友留言

立即登入留言