Question

我有一个带有对象的HTML <canvas>，我试图为其颜色设置动画。

例如，我可能想要从rgb(255, 240, 100)动画到rgb(255, 255, 255)。虽然可以通过一些字符串处理和连接来计算中间颜色，但我试图避免这种情况，因为将特定构造的字符串指定为fillStyle似乎比使用fillStyle慢得多设置为特定值（至少在Chrome中）。

有没有办法，通过使用像globalCompositionOperation之类的东西来避免连接我的颜色字符串？

Answer 1

这是一个绘制正方形并淡化其填充颜色的工作示例它在两个颜色值之间进行插值，我认为结果非常流畅也许其他东西会降低动画的性能。

＆＃13;

function getColorStr(r1, g1, b1, r2, g2, b2, pct) {
  var rn = Math.round((1-pct) * r1 + pct * r2),
      gn = Math.round((1-pct) * g1 + pct * g2),
      bn = Math.round((1-pct) * b1 + pct * b2);
  return 'rgb('+rn+','+gn+','+bn+')'
}

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var cW = canvas.width,
    cH = canvas.height;

var color1 = [255, 240, 100],
    color2 = [255, 255, 255];
var cycleLength = 2;
var cyclePct = 0;
var lastTs = Date.now();

ctx.fillStyle = 'white';
ctx.fillRect(0, 0, cW, cH);

requestAnimationFrame(draw);
  
function draw() {
  var now = Date.now();
  var dt = (now - lastTs)/1000; //seconds
  cyclePct += dt/cycleLength;
  if (cyclePct > 1) cyclePct = 0;
  lastTs = now;
  
  var color = getColorStr(color1[0], color1[1], color1[2], color2[0], color2[1], color2[2], cyclePct);
  
  ctx.fillStyle = color;
  ctx.fillRect(10, 10, 50, 50);
  requestAnimationFrame(draw);
}

＆＃13;

<canvas id="canvas" width="320" height="200"/>

＆＃13;

使用canvas功能在JavaScript画布中混合颜色

1 个答案: