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