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

Question

我正在画一张简单的图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;

Answer 1

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

Answer 2

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

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

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

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

How to change the canvas linewidth with html range input (slider)?

javascript

canvas

input

slider

html5-canvas