调整三角形边长时如何清除HTML Canvas原有绘图？

问题出在Canvas 2D上下文的路径累积特性上：你每次调用lineTo、moveTo时，这些路径会被添加到上下文的路径列表中，哪怕用clearRect清空了画布，调用stroke()时还是会把所有累积的路径重新绘制一遍，导致旧线条残留。

修复步骤： #

1. 在每次绘制新图形前，调用ctx.beginPath()重置路径列表，确保stroke()只绘制当前的新路径
2. 把初始的绘制逻辑直接调用update()函数，避免代码重复

修改后的完整代码： #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
</head>
<body>
    <div>
        <canvas id="myCanvas2" width="800" height="400" >
        </canvas>
        <label for="b_range">change the length of b:</label>
        <input id="b_range" type="range" min="10" max="150" value="150" oninput="update()">
    </div>
    <script>
        var canvas = document.getElementById("myCanvas2");
        var ctx = canvas.getContext("2d");

        var range = document.getElementById("b_range");
        var val = 150;

        function update() {
            val = range.value;
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            // 重置路径，避免累积
            ctx.beginPath();
            ctx.moveTo(500, 250);
            ctx.lineTo(val, 250);
            ctx.lineTo(500, 100);
            ctx.lineTo(500, 250);
            ctx.moveTo(480, 250);
            ctx.lineTo(480 ,230);
            ctx.lineTo(500, 230);
            ctx.stroke();
            ctx.font = 'bold 20px Arial';
            ctx.fillStyle = 'black';
            ctx.fillText("b", 335, 270);
        }
        // 初始绘制直接调用update，避免重复代码
        update();
    </script>
</body>
</html>

额外说明： #

• clearRect负责清空画布像素，但不会重置上下文的路径状态
• beginPath()会清空上下文的路径集合，让后续的路径绘制操作从头开始
• 把初始绘制逻辑合并到update()里，既能减少冗余代码，也能保证初始状态和拖动后的绘制逻辑一致

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