画图小工具制作指南：原生 Canvas 踩坑避雷

我们常说的画图小工具，其实就是利用原生的 HTML Canvas 元素。Canvas 画图的流程通常是：清空画布、根据鼠标位置或事件绘制形状，最后根据需要填充颜色或线条。

在制作画图小工具的过程中，我会遇到一些小坑，但经过一番摸爬滚打，终于爬了出来。本文就来分享一下我的踩坑经历和解决方法，希望能给有同样困惑的朋友一些帮助。

踩坑 1：矩形和圆形绘制位置偏移

// 错误代码：
const x = e.clientX;
const y = e.clientY;
fillRect(x, y, 100, 100); // 绘制矩形

在这个代码中，我使用 e.clientX 和 e.clientY 来记录鼠标的初始位置，然后在 fillRect 函数中直接使用这些值作为矩形的起点坐标。

但问题是，在 mousemove 事件中，鼠标的位置会不断变化，导致矩形的绘制位置也会不断偏移。

解决方法：

我们可以在事件监听器中将初始位置保存起来，然后在绘制形状时使用保存的位置。

// 正确代码：
let startX, startY;
const handleMouseMove = (e) => {
  if (!startX) {
    startX = e.clientX;
    startY = e.clientY;
  }

  fillRect(startX, startY, 100, 100); // 绘制矩形
};

踩坑 2：形状绘制后未擦除

在绘制形状时，如果没有主动清除画布，那么新绘制的形状会覆盖在之前的形状之上，导致画面凌乱。

// 错误代码：
fillRect(x, y, 100, 100); // 绘制矩形
fillRect(x + 50, y + 50, 100, 100); // 绘制第二个矩形

解决方法：

在绘制形状之前，可以先使用 clearRect 函数清除画布上的内容。

// 正确代码：
clearRect(0, 0, canvasWidth, canvasHeight); // 清除画布
fillRect(x, y, 100, 100); // 绘制矩形
fillRect(x + 50, y + 50, 100, 100); // 绘制第二个矩形

踩坑 3：图片无法绘制到画布

// 错误代码：
const image = new Image();
image.src = 'image.png';
drawImage(image, 100, 100); // 绘制图片

这个代码中，我们尝试绘制一张图片到画布上，但会出现无法绘制的情况。

解决方法：

需要等到图片加载完成后再绘制到画布上。

// 正确代码：
const image = new Image();
image.onload = () => {
  drawImage(image, 100, 100); // 绘制图片
};
image.src = 'image.png';

结语

在制作原生 Canvas 画图小工具时，需要特别注意一些容易踩到的坑，如位置偏移、形状未擦除和图片绘制失败。通过解决这些问题，我们可以制作出功能完善、用户体验良好的画图工具。