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

的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/

10-09 22:04