JavaScript画布-平滑地更改rgb

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

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的值。问题是在矩形变成蓝色之前，他还得到了其他颜色（比如绿色）。这是因为绿色将仅增加3个单位，但其余颜色仍需要时间才能获得新值。例如：

---

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

这是你想要的吗

var debug=document.querySelector（“#debug”），
canvas=document.querySelector（“#mycanvas”），
ctx=canvas.getContext（'2d'），
红色=255，
蓝色=0，
绿色=179，
tm=日期。现在（），
inc=2；
函数lerp（a、b、n）{
退货（b-a）*n+a；
}
函数animate（）{
var n=（Date.now（）-tm）*0.001；
n=数学最大值（0，数学最小值（1，n））；
红色=lerp（255，36，n）| 0；
绿色=lerp（179182，n）| 0；
蓝色=lerp（0，255，n）| 0；
debug.innerText=`${red}${green}${blue}`；
clearRect（0，0，canvas.width，canvas.height）；
ctx.beginPath（）；
ctx.rect（100100100100）；
ctx.fillStyle=`rgb（${red}，${green}，${blue}）`；
ctx.fill（）；
ctx.closePath（）；
window.requestAnimationFrame（动画）；
}
制作动画（）

我会使用一个this函数来灵活地选择要淡入的颜色

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

余额
必须介于0和1之间。因此，可以在动画循环中增加一个变量，并使用该变量作为平衡参数调用
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;

我在这里改编了你的例子：
+1，勒平在处理此类情况时总是简单有效的。您可能希望在lerp中考虑提问者inc=2；-）