Canvas实现circular progress bar：滚动向上时进度条无法回退求助

问题核心在于：每次滚动事件触发时，你只是在画布上叠加绘制新的弧线，没有清除之前的绘制内容——所以向上滚动时旧的进度线条不会消失，看起来进度条没回退。

修复方案：

• 每次绘制前用clearRect清除整个画布内容
• 把固定的绘图配置（比如上下文获取、线条宽度）移到滚动事件外，避免重复执行浪费性能
• 补全未闭合的标签（原代码里content div未闭合）

修改后的完整代码：

<canvas id="canvas" width="200" height="200" style="position:fixed;"></canvas>

<h1 style="position: fixed;">scroll up and down to view the progress</h1>
<div id="content" style="height: 3000px;"></div>

<script>
    var body = document.body
    var myCanva = document.getElementById('canvas')
    // 提前获取绘图上下文，不用每次滚动都重新获取
    const ctx = myCanva.getContext("2d")
    // 固定样式移到外面，避免重复设置
    ctx.lineWidth = 20;

    window.addEventListener('scroll', (e) => {
        let alto = body.offsetHeight - window.innerHeight
        let posY = window.scrollY
        let grados = (360 * (posY / alto)) // 根据滚动比例计算对应角度

        let endAngle = (Math.PI / 180) * grados
        
        // 清除画布上的所有内容
        ctx.clearRect(0, 0, myCanva.width, myCanva.height)
        
        ctx.beginPath();
        ctx.arc(100, 100, 50, 0, endAngle)
        ctx.stroke()
    })
</script>

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