javascript - 如何使用html范围输入(滑块)更改 Canvas 的线宽？

我正在制作一个简单的绘图画布。我想通过移动滑块动态更改画笔的厚度（线宽）。问题是线宽值确实会随着滑块而变化。滑块的初始值已分配给线宽，但是更改滑块不会导致线宽值发生变化。

的HTML：

<input type="range" name="brushsize" min="0" max="20" id="brushSlider" step="1" value="5" onchange="this.setAttribute('value',this.value);">

js：

var brushSize = document.getElementById("brushSlider").value;
context.lineWidth = brushSize;

最佳答案

线宽值没有改变，因为您只设置了一次。您需要在输入上设置事件侦听器，以在更改输入后更新线宽。

var brushSlider = document.getElementById("brushSlider");
context.lineWidth = brushSlider.value;

brushSlider.addEventListener("change", function () {
    context.lineWidth = brushSlider.value;
});

关于javascript - 如何使用html范围输入(滑块)更改 Canvas 的线宽？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31365387/