如何解决窗口调整大小时Canvas线条重复绘制的问题？

嘿，这个问题其实挺常见的，我来帮你搞定！

问题根源 #

每次窗口调整大小的时候，你应该是重复调用了drawCanvas函数，但既没有清除画布上已有的旧线条，又因为窗口resize会连续触发多次事件，导致新线条不断叠加在旧线条上，看起来就像重复绘制了。

两个核心解决步骤 #

• 每次绘制前清空画布：用Canvas上下文的clearRect方法直接清除整个画布内容，确保每次绘制都是从零开始。
• 给resize事件加防抖：避免窗口调整时频繁触发绘制函数，减少不必要的性能消耗。

修改后的代码示例 #

drawCanvas() {
  const c = document.getElementById("canvas");
  // 先设置Canvas宽高（这一步本身会重置画布，加上clearRect更稳妥）
  c.width = window.innerWidth;
  c.height = window.innerHeight;
  
  const lineH = c.getContext("2d");
  // 清空整个画布，彻底清除旧内容
  lineH.clearRect(0, 0, c.width, c.height);
  
  const positionCanvas = () => {
    const divPosition = document.querySelector('.myDiv').offsetLeft;
    lineH.fillStyle = "grey";
    // 补全你的垂直线条绘制逻辑
    lineH.fillRect(divPosition, 0, 2, c.height);
  };
  
  positionCanvas();
}

// 给resize事件添加防抖处理，避免频繁触发绘制
let resizeTimer;
window.addEventListener('resize', () => {
  clearTimeout(resizeTimer);
  // 延迟100ms执行绘制，只有窗口调整停止后才会触发
  resizeTimer = setTimeout(() => {
    drawCanvas();
  }, 100);
});

关键细节说明 #

1. 清空画布的顺序：先设置Canvas宽高（这一步会自动重置画布状态），再获取上下文并执行clearRect，双重保障不会有旧内容残留。
2. 防抖的必要性：窗口调整时浏览器会连续触发几十次resize事件，防抖能让绘制函数只在调整停止后执行一次，既解决重复绘制问题，又能提升页面性能。

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