JavaScript Canvas - change smoothly rgb

问题

I'm trying to change color of a rectangle from 'yellow' to 'blue'. I use for it fillStyle with 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();

The idea was to change valuse of rgb by adding or subtracting variable named inc (equal 2). The problem is that before rectangle reach blue, he gets also other colors (like green for example). This is because the green color will increase by only 3 units, but rest of colors still needs time to get their new values. Example:

http://jsfiddle.net/f2Za8/

Is there any way to make 'green' reach its new value at the same time as the 'red' and 'blue'? How to do that?

回答1:

Does this do what you want?

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

回答2:

I would use a this function to be flexible about which colors you want to fade into which.

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 must be between 0 and 1. So can could increase a variable within the animation loop and call blendColors() with this variable as balance argument.

The function returns an object with r,g and b properties. Usage:

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

I have adapted your example here: http://jsfiddle.net/f2Za8/7/

来源：https://stackoverflow.com/questions/22734414/javascript-canvas-change-smoothly-rgb

标签

javascript

html5

canvas