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

Question

我正在制作一个简单的绘图 Canvas 。我想通过移动 slider 动态改变画笔的粗细(线宽)。问题是线宽值确实随 slider 相应变化。 slider 的初始值被分配给线宽，但是更改 slider 不会导致线宽值发生变化。

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;

Answer 1

线宽值不会改变，因为您只设置了一次。您需要在输入上设置一个事件监听器，以便在输入更改时更新线宽。

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

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