Canvas类绘图应用中如何实现非永久绘制的矩形画笔预览

嗨，我完全懂你的问题——想做一个画笔预览，鼠标移动时显示矩形轮廓，但又不能让这些预览痕迹留在画布上，对吧？其实Canvas本身没有原生的“临时绘制”功能，因为它是即时模式的绘图API，所有绘制操作都会直接修改画布像素。不过我们可以用几个实用的技巧来模拟这种效果，给你分享两种常用方案：

方案一：双画布叠加法（最推荐，性能友好） #

这个方法的核心是用两个Canvas叠在一起，分离“真实绘制内容”和“临时预览”：

• 底层Canvas：专门用来保存用户真正画出来的内容（就是你之前用fillRect实现的部分）。
• 上层Canvas：只用来显示临时的预览轮廓，每次鼠标移动时先清空上层画布，再在新位置画预览。

代码示例 #

HTML部分（叠加画布）

<div style="position: relative;">
  <!-- 底层：存储真实绘制内容 -->
  <canvas id="mainCanvas" width="800" height="600"></canvas>
  <!-- 上层：仅显示预览，设置绝对定位和事件穿透 -->
  <canvas id="previewCanvas" width="800" height="600" style="position: absolute; top: 0; left: 0; pointer-events: none;"></canvas>
</div>

JavaScript部分

// 获取两个画布的上下文
const mainCtx = document.getElementById('mainCanvas').getContext('2d');
const previewCtx = document.getElementById('previewCanvas').getContext('2d');

// 原有的真实绘制函数
const drawHandler = () => {
  const middle = brushSize / 2;
  mainCtx.fillRect(
    currentTransformedCursor.x - middle,
    currentTransformedCursor.y - middle,
    brushSize,
    brushSize
  );
};

// 预览绘制函数
const drawPreview = () => {
  // 先清空整个预览画布（只清上层，不影响底层）
  previewCtx.clearRect(0, 0, previewCtx.canvas.width, previewCtx.canvas.height);
  
  if (currentTransformedCursor) {
    const middle = brushSize / 2;
    previewCtx.strokeRect(
      currentTransformedCursor.x - middle,
      currentTransformedCursor.y - middle,
      brushSize,
      brushSize
    );
  }
};

// 鼠标移动时触发预览更新
document.getElementById('mainCanvas').addEventListener('mousemove', drawPreview);

关键点说明：上层Canvas设置pointer-events: none是为了让鼠标事件完全穿透到底层，不影响用户的正常绘画操作。

方案二：全量重绘法（适合小型绘图场景） #

如果你的绘图内容不多，或者有办法记录所有绘制操作（比如用数组存每一笔的信息），可以用全量重绘的方式：

1. 每次鼠标移动时，先清空整个主画布。
2. 重新绘制所有用户已经画好的内容。
3. 在当前光标位置绘制预览轮廓。

代码示例 #

// 用数组记录所有已绘制的矩形信息
const drawnRects = [];
const context = document.getElementById('mainCanvas').getContext('2d');

// 真实绘制时，把矩形信息存入数组
const drawHandler = () => {
  const middle = brushSize / 2;
  const rect = {
    x: currentTransformedCursor.x - middle,
    y: currentTransformedCursor.y - middle,
    size: brushSize
  };
  drawnRects.push(rect);
  // 绘制当前矩形
  context.fillRect(rect.x, rect.y, rect.size, rect.size);
};

// 预览函数：先重绘历史内容，再画预览
const drawPreview = () => {
  // 清空整个画布
  context.clearRect(0, 0, context.canvas.width, context.canvas.height);
  
  // 重绘所有已完成的矩形
  drawnRects.forEach(rect => {
    context.fillRect(rect.x, rect.y, rect.size, rect.size);
  });
  
  // 绘制当前预览轮廓
  if (currentTransformedCursor) {
    const middle = brushSize / 2;
    context.strokeRect(
      currentTransformedCursor.x - middle,
      currentTransformedCursor.y - middle,
      brushSize,
      brushSize
    );
  }
};

注意：这个方法的缺点是如果绘制内容太多，每次重绘会导致卡顿，所以更适合简单的小型绘图应用。

总结 #

Canvas没有原生的“临时绘制”功能，但双画布叠加法是最通用且性能最好的方案，能完美分离真实绘制和临时预览，不会互相干扰。如果你的场景比较简单，全量重绘法也可以凑合用，但大场景下还是优先选双画布~

备注：内容来源于stack exchange，提问作者Kimor