HTML5 Canvas 鼠标移动轨迹渐隐效果实现问题 需达成gartic.io同类效果

问题根因 #

你原有实现的核心问题是直接叠加白色半透明填充层，当Canvas设置为透明背景时，这层白色填充会覆盖Canvas下方的div背景，才会出现背景一同被渐隐的异常效果。

优化方案 #

通过Canvas的globalCompositeOperation合成模式控制，只降低已绘制线条的透明度，不会新增不透明填充层，完全不影响Canvas下方的背景元素：

function fadeOut(ctx, canvas) {
  ctx.save();
  // 合成模式设为destination-out：仅降低已有绘制内容的透明度，不会新增可见填充层
  ctx.globalCompositeOperation = 'destination-out';
  ctx.fillStyle = 'rgba(255, 255, 255, 0.05)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.restore();
  setTimeout(() => fadeOut(ctx, canvas), 50);
}

配置说明 #

• 调整fillStyle中的透明度数值（0.05）可控制单次渐隐的幅度，数值越大渐隐速度越快
• 调整setTimeout的间隔时间（50ms）也可控制整体渐隐速率
• save()和restore()包裹渐隐逻辑，不会影响你后续绘制新线条的画布配置

内容的提问来源于stack exchange，提问作者Mert Doğruca