如何在Canvas迭代中仅清除线条保留圆弧并优化性能？

需要在Canvas的动画迭代中，仅清除每次绘制的红色线条，保留所有已绘制的白色圆弧。使用clearRect()会清除整个画布，save()/restore()无法满足需求，以下是兼顾性能的可行解决方案：

核心思路：双Canvas分层绘制 #

采用分层Canvas是最高效的实现方式：

• 底层Canvas：专门绘制并永久保留所有白色圆弧，绘制完成后无需再修改
• 上层Canvas：仅负责绘制动态变化的红色线条，每次迭代前清除上层画布即可

这种方式既避免了全量重绘的性能损耗，又精准实现了只清除线条的需求。

完整实现代码 #

HTML #

<div class="canvas-container">
  <canvas id="arcCanvas"></canvas>
  <canvas id="lineCanvas"></canvas>
</div>

CSS #

body{
  display:grid;
  place-items:center;
  min-height:100vh;
  background:gray;
}
.canvas-container {
  position: relative;
}
canvas {
  position: absolute;
  top: 0;
  left: 0;
  background: transparent;
}
#arcCanvas {
  background: black;
}

JavaScript #

// 初始化底层圆弧画布
const arcCanvas = document.getElementById('arcCanvas')
const arcCtx = arcCanvas.getContext('2d')
// 初始化上层线条画布
const lineCanvas = document.getElementById('lineCanvas')
const lineCtx = lineCanvas.getContext('2d')

const CH = 400
const CW = 400
arcCanvas.height = CH
arcCanvas.width = CW
lineCanvas.height = CH
lineCanvas.width = CW

const vs = () => {
    let radius = 50;
    let i = 0;

    const interval = setInterval(() => {
        let x = Math.cos(i) * radius + CH / 2;
        let y = Math.sin(i) * radius + CW / 2;

        if(i > 2 * Math.PI) {
            clearInterval(interval);
            return;
        }
        
        // 底层画布绘制白色圆弧，永久保留
        arcCtx.beginPath();
        arcCtx.arc(x, y, 1, 0, 2 * Math.PI)
        arcCtx.closePath();
        arcCtx.strokeStyle = "white";
        arcCtx.stroke();
  
        // 清除上层画布的旧线条，绘制新线条
        lineCtx.clearRect(0, 0, CW, CH);
        lineCtx.beginPath();
        lineCtx.moveTo(0, 0);
        lineCtx.lineTo(x, y);
        lineCtx.closePath();
        lineCtx.strokeStyle = "red";
        lineCtx.stroke();
        
        i += 0.01;
    }, 10)
}

vs();

方案优势 #

• 性能最优：底层圆弧仅绘制一次，上层仅执行单次清除和单线条绘制，避免全量重绘的性能开销
• 逻辑清晰：分层管理不同类型的绘制内容，后续功能扩展更便捷
• 精准控制：完全实现只清除动态线条、保留静态圆弧的需求

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