如何在保留相交重叠效果的同时消除Canvas画笔路径的首尾重叠问题？

解决方案 #

你遇到的两个问题可以通过以下两种简洁方案解决，可根据你的业务需求选择： #

方案1：单路径实时重绘（适合不需要极致自交叠加的场景） #

核心逻辑是把当前正在绘制的整条笔画的所有坐标存在数组中，每次绘制时完整重绘当前整条路径，避免逐段stroke带来的端点重叠：

1. 落笔时（onmousedown），先保存当前画布的快照，同时初始化一个空的坐标数组存储当前笔画的所有点
2. 拖动绘制（onmousemove）时，把当前坐标加入数组，先把画布恢复到落笔前的快照，再将数组中所有坐标拼成完整路径一次性stroke
3. 抬笔时（onmouseup），把当前整条路径正式绘制到画布上，清空坐标数组和快照
   该方案无额外的参数调整，完全消除衔接圆点，适合绝大多数普通画笔场景。

方案2：优化逐段绘制逻辑（适合需要保留自交叠加效果的场景） #

如果你的画笔支持半透明效果，需要保留路径自交处的叠加渲染，只需要调整逐段绘制的线段范围，避免端点重复渲染即可：

// 存储当前笔画的坐标缓存
let pointQueue = [];
function onMove() {
  const currentPos = getPosition(event);
  pointQueue.push(currentPos);
  // 凑够3个点再开始绘制，保证线段连续无重叠端点
  if (pointQueue.length < 3) return;
  const p1 = pointQueue[pointQueue.length - 3];
  const p2 = pointQueue[pointQueue.length - 2];
  const p3 = pointQueue[pointQueue.length - 1];
  ctx.beginPath();
  // 绘制两个中点之间的二次贝塞尔曲线，无重复端点区域
  ctx.moveTo((p1.x + p2.x) / 2, (p1.y + p2.y) / 2);
  ctx.quadraticCurveTo(p2.x, p2.y, (p2.x + p3.x) / 2, (p2.y + p3.y) / 2);
  ctx.stroke();
  // 只保留最近3个点，减少内存占用
  if (pointQueue.length > 3) pointQueue.shift();
}

你还可以配合设置以下绘制参数优化效果：

• ctx.lineCap = "round"
• ctx.lineJoin = "round"
  该方案完全保留自交处的叠加效果，同时不会出现衔接处的重叠圆点，性能开销和原代码基本一致。

效果示意图：
#

内容的提问来源于stack exchange，提问作者habibhassani