1

我有 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();
4

2 回答 2

2

这就是我使用 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 链接

于 2013-09-26T05:57:40.917 回答
1

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

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

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

  • 红色：在 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 到 100 中的 0 到 255。

编辑：

这是交易的第三种选择：

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

于 2013-09-26T07:06:51.183 回答