在點擊畫布時,使用 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