javascript - 根据 slider 的值更改矩形的颜色

Question

我有 html5 Canvas 和矩形。其次，我有一个 slider 。当用户更改 slider 的位置时，矩形的颜色会根据 slider 的值自动更改。 slider 的范围是0-100。 0 代表 0 代表蓝色，100 代表红色。 我怎样才能做到这一点？

这是我的代码 jsfiddle

<canvas id="canvas"></canvas>
<input type="range" id="range" min="0" max="100" value="0">

js

    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');

    context.beginPath();
    context.rect(188, 50, 200, 100);
    context.fillStyle = 'yellow';
    context.fill();

Answer 1

这就是我使用 0-255 比例进行处理的方法，因为 rgb 值介于 0-255 之间。
不过，您可以使用一些数学知识来使用 0-100 并将其在幕后转换为 0-255。

---

HTML:

<canvas id="canvas"></canvas>
<input type="range" id="range" min="0" max="255" value="0">

JavaScript:

var slider = document.getElementById('range');
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

function sliderChange() {
    var value = parseInt(slider.value, 10);
    context.beginPath();
    context.rect(188, 50, 200, 100);
    context.fillStyle = 'rgb(' + value + ', 0, ' + (255 - value) + ')';
    context.fill();   
}

slider.onchange = sliderChange;

sliderChange(); // run our function once to start

---

jsFiddle link