如何实现range滑块拖动时实时更新canvas画布渲染内容？

需求梳理 #

• 页面顶部放置范围滑块，实时控制Canvas画布参数（例如圆形半径），实现渲染效果和滑块操作实时同步
• 现有代码已完成基础绘制逻辑，但仅支持点击Draw按钮触发画布重绘，需要优化为拖动滑块时无需点击按钮即可自动更新画布内容

原有实现代码 #

<input type="range" id="MySldr" value="15" min="1" max="100">
<button class="Btn">Draw</button>
<canvas class="result"></canvas>

<script>
    let Btn = document.querySelector(".Btn");
    Btn.addEventListener("click", () => {
        let res = document.querySelector(".result");
        var ctx = res.getContext("2d");
                    
        let SldrVal = document.getElementById("MySldr").value;

        ctx.clearRect(0, 0, 1000, 1000);
        ctx.beginPath();
        ctx.arc(125, 125, SldrVal, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.font = "30px Arial";
        ctx.fillText(SldrVal, 10, 50);
    });
</script>

实现方案 #

问题本质是绘制逻辑仅绑定在了按钮的click事件上，所以只有点击按钮才会执行。只需要把通用绘制逻辑抽成独立函数，同时给滑块绑定值变化监听事件，触发时调用同一个绘制函数即可。

修改后可直接运行的完整代码：

<input type="range" id="MySldr" value="15" min="1" max="100">
<button class="Btn">Draw</button>
<canvas class="result" width="250" height="250"></canvas>

<script>
    // 提前获取DOM元素和绘图上下文，避免每次绘制都重复查询页面
    const Btn = document.querySelector(".Btn");
    const slider = document.getElementById("MySldr");
    const canvas = document.querySelector(".result");
    const ctx = canvas.getContext("2d");

    // 抽取公共绘制函数
    function draw() {
        const sliderVal = slider.value;
        // 清空画布
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        // 绘制圆形
        ctx.beginPath();
        ctx.arc(125, 125, sliderVal, 0, 2 * Math.PI);
        ctx.stroke();
        // 绘制当前半径数值
        ctx.font = "30px Arial";
        ctx.fillText(sliderVal, 10, 50);
    }

    // 保留按钮点击触发绘制的逻辑
    Btn.addEventListener("click", draw);
    // 滑块值变动时（拖动、键盘方向键调整都会触发）实时重绘
    slider.addEventListener("input", draw);

    // 页面加载完成后自动绘制初始状态
    draw();
</script>

核心修改点 #

• 将重复使用的绘制逻辑抽为独立函数，按钮点击、滑块拖动都可以直接调用，无需重复编写相同代码
• 给滑块绑定input事件：只要滑块值发生变动，立刻执行绘制，不需要手动点击按钮
• 将DOM查询、绘图上下文获取逻辑移到函数外，每次触发绘制不需要重复查询页面元素，运行效率更高
• 页面初始加载时自动执行一次绘制，打开页面就能看到默认参数下的效果，无需手动触发
• 给canvas标签补充了宽高属性，避免画布尺寸和绘制逻辑不匹配的显示问题

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