如何用html范围输入（滑块）更改画布线宽？

Question

我在做一个简单的画布。我想通过移动滑块来动态改变画笔的粗细（线宽）。问题是线宽值与滑块相应地发生了变化。滑块的初始值分配给线宽，但更改滑块不会导致线宽值的更改。

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; 
}); 

Answer 2

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

function changeLineWidth(brushSize){ 
    context.lineWidth = brushSize; 
}