Question

我正在尝试将矩形的颜色从“黄色”更改为“蓝色”。我用它来fillStyle使用rgb。

var 
    canvas = document.getElementById('mycanvas'),
    ctx = document.getElementById('mycanvas').getContext('2d'),
    red = 255,
    blue = 0,
    green = 179,
    inc = 2;

function animate(){
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.beginPath();
    ctx.rect(100, 100, 100, 100);
    ctx.fillStyle = 'rgb('+ red +','+ green +','+ blue +')';
    ctx.fill();    
    ctx.closePath();
    red = Math.min(Math.max(red - inc, 36))
    green = Math.max(green, Math.min(182, green + inc));
    blue = Math.max(blue, Math.min(255, blue + inc));

    requestAnimationFrame(animate);
}

animate();

想法是通过添加或减去名为inc的变量（等于2）来更改rgb的valuse。问题是在矩形达到蓝色之前，他还会获得其他颜色（例如绿色）。这是因为绿色只会增加3个单位，但其余颜色仍然需要时间来获得新值。例如：

http://jsfiddle.net/f2Za8/

有没有办法让“绿色”在“红色”和“蓝色”的同时达到新的价值？怎么做？

Answer 1

我会使用这个函数来灵活处理你想要淡入哪些颜色。

function blendColors(r1,g1,b1,r2,g2,b2,balance) {
    var bal = Math.min(Math.max(balance,0),1);
    var nbal = 1-bal;
    return {
            r : Math.floor(r1*nbal + r2*bal),
            g : Math.floor(g1*nbal + g2*bal),
            b : Math.floor(b1*nbal + b2*bal)
           };
}

balance必须介于0和1之间。因此可以在动画循环中增加变量，并使用此变量作为balance参数调用blendColors()。

该函数返回具有r，g和b属性的对象。用法：

var blendedColor = blendColors(0,0,255,255,255,0,0.5);
// blendedColor.r contains 127;
// blendedColor.g contains 127;
// blendedColor.b contains 127;

我在这里修改了你的例子： http://jsfiddle.net/f2Za8/7/

Answer 2

这样做你想要的吗？

HTML：

<p id="debug"></p>
<canvas id="mycanvas" width="600" height="400"></canvas>

JS：

   var debug=document.getElementById("debug"),
        canvas = document.getElementById('mycanvas'),
        ctx = document.getElementById('mycanvas').getContext('2d'),
        red = 255,
        blue = 0,
        green = 179,
        tm=Date.now(),
        inc = 2;

    function lerp(a,b,n)
    {
        return (b-a)*n+a;
    }

    function animate()
    {
        var n=(Date.now()-tm)*0.001;
        n=Math.max(0,Math.min(1,n));

        red = lerp(255,36,n)|0;
        green = lerp(179,182,n)|0;
        blue = lerp(0,255,n)|0;

        debug.innerHTML=red+", "+green+", "+blue;

        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.beginPath();
        ctx.rect(100, 100, 100, 100);
        ctx.fillStyle = 'rgb('+ red +','+ green +','+ blue +')';
        ctx.fill();    
        ctx.closePath();

        requestAnimationFrame(animate);
    }

    animate();

JavaScript Canvas - 顺利更改rgb

2 个答案: