1

その上にhtml5キャンバスと長方形があります。次に、スライダーがあります。ユーザーがスライダーの位置を変更すると、スライダーの値に基づいて長方形の色が自動的に変更されます。スライダーの範囲は です0-100。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

RGB 値は 0 ～ 255 であるため、これは 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);

2 つの両方を含む JSFiddle

「赤から黄、青」の場合、3 色:

  • 赤: 0 から 50 で 255 に留まり、50 から 100 で 255 から 0 に留まる。
  • 緑: 0 から 50 で 0 から 255、次に 50 から 100 で 255 から 0。
  • 青: 0 ～ 50 では 0 に留まり、50 ～ 100 では 0 ～ 255 になります。

「赤から青」の場合、3 色:

  • 赤: 0 ～ 100 で 255 ～ 0。
  • 緑: 存在しません。
  • 青: 0 から 100 で 0 から 255。

編集：

トランザクションの 3 番目のオプションは次のとおりです。

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);

3 つすべてを含む JSFiddle

于 2013-09-26T07:06:51.183 に答える