Question

我有html5画布和矩形。其次，我有一个滑块。当用户改变滑块的位置时，矩形的颜色会根据滑块的值自动改变。滑块范围为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

Answer 2

如果你想从红色变为黄色到蓝色：

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

slider.addEventListener("change",function(){
    var r,g,b;
    if(slider.value<=50){
        r=255;
        g=Math.round(255*slider.value/50);
        b=0;
    }else{
        r=Math.round(255*(100-slider.value)/50);
        g=r;
        b=Math.round(255*(slider.value-50)/50);
    }
    ctx.clearRect(0,0,100,100);
    ctx.save();
    ctx.fillStyle="rgb("+r+","+g+","+b+")";
    ctx.beginPath();
    ctx.rect(0,0,100,100);
    ctx.fill();
    ctx.restore();
},false);

如果你想从红色变为蓝色：

var slider=document.getElementById("range");
var ctx=document.getElementById("canvas").getContext("2d");
slider.addEventListener("change",function(){
    var r,b;
    r=Math.round(255*(100-slider.value)/100);
    b=Math.round(255*slider.value/100);
    ctx.clearRect(0,0,100,100);
    ctx.save();
    ctx.fillStyle="rgb("+r+",0,"+b+")";
    ctx.beginPath();
    ctx.rect(0,0,100,100);
    ctx.fill();
    ctx.restore();
},false);

JSFiddle that contains both two

在“红到黄到蓝”的情况下，三种颜色：

红色：在0到50之间保持255，然后在50到100之间保持255到0;
绿色：从0到255，0到50，然后255到0，在50到100;
蓝色：在0到50之间保持0，然后在50到100之间保持0到255。

在“红到蓝”的情况下，有三种颜色：

红色：从0到100的255到0;
绿色：不存在;
蓝色：从0到255，0到100。

编辑：

以下是交易的第三个选项：

var slider=document.getElementById("range");
var ctx=document.getElementById("canvas").getContext("2d");
slider.addEventListener("change",function(){
    var r,g,b;
    if(slider.value<=25){
        r=255;
        g=Math.round(255*slider.value/25);
        b=0;
    }else if(slider.value<=50){
        r=Math.round(255*(50-slider.value)/25);
        g=255;
        b=0;
    }else if(slider.value<=75){
        r=0;
        g=255;
        b=Math.round(255*(slider.value-50)/25);
    }else{
        r=0;
        g=Math.round(255*(100-slider.value)/25);
        b=255;
    }
    ctx.clearRect(0,0,100,100);
    ctx.save();
    ctx.fillStyle="rgb("+r+","+g+","+b+")";
    ctx.beginPath();
    ctx.rect(0,0,100,100);
    ctx.fill();
    ctx.restore();
},false);

JSFiddle that contains all three

根据滑块的值更改矩形的颜色

2 个答案: