时间戳

首页 > 解决方案 > 如何在 html 画布上显示范围滑块值

javascript - 如何在 html 画布上显示范围滑块值

问题描述

我有一个范围滑块，我想在 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);
}

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

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

标签： javascripthtmlcanvas

解决方案

我没有这个问题，可能是 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>

推荐阅读