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

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

2 个答案: