Question

我有一个范围滑块，我想显示HTML画布上的范围滑块值，并且当范围滑块值更改时，该值应该在画布上始终更改。

slider.oninput = function() {
output.innerHTML = this.value;     //this gets the range slider value every time it changes
var rangevalue = output.innerHTML; //and sends it to drawToCanvas function.
drawToCanvas(rangevalue);
}

范围值发送到drawToCanvas函数，但不在画布上显示。 Canvas显示“未定义”，我不知道为什么，因为drawToCanvas函数将rangevalue作为参数并将其存储到变量“ rangevalue”。当我在console.log上检查rangevalue的值时，该值是正确的，并且每次我在范围滑块上更改该值时都会更改，但是画布仍然显示“未定义”？

ctx.fillText(rangevalue, 50, 95); //here I try to show the value of rangevalue variable

Answer 1

我没有这个问题，可能是drawToCanvas中的错字。

<input id="slider" type="range" max="1000000">
<div id="output"></div>
<canvas id="cnv" height="1000" width="1000"></canvas>
<script>
    var ctx = cnv.getContext("2d")
    slider.oninput = function() {
        output.innerHTML = this.value; //this gets the range slider value every time it changes
        var rangevalue = output.innerHTML; //and sends it to drawToCanvas function.
        drawToCanvas(rangevalue)
    }
function drawToCanvas(rangevalue){
    ctx.clearRect(0, 0, 1000, 1000)
    ctx.fillText(rangevalue, 100, 100) 
}
</script>

如何在HTML画布上显示范围滑块值

1 个答案: