Question

鉴于两个不同的图片（比如image A和image B），假设我想在画布上以约60 FPS的速度绘制image A，我想绘制{{ 1}}大约30 FPS。

我的问题是，使用 requestAnimationFrame 最好的方法是什么？我应该制作2幅画布吗？

Answer 1

requestAnimationFrame的回调接收时间戳作为其第一个参数。使用该时间戳来计算在回调的最后一次执行和当前执行之间传递的时间，并根据该时间进行绘制。

这是一个展示上述原则的简单例子：

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

let last100 = 0;
let last500 = 0;

function frame(time) {
  ctx.fillStyle = 'rgb(' + Math.random() * 255 + ', 0, 0)';
  
  // 10 frames per second (1000/10 = 100):
  if (time > last100 + 100) {
    ctx.fillRect(0, 0, 100, 100);
    last100 = time;
  }
  
  // 2 frames per second (1000/2 = 500):
  if (time > last500 + 500) {
    ctx.fillRect(200, 0, 100, 100);
    last500 = time;
  }
  requestAnimationFrame(frame);
}

requestAnimationFrame(frame);

<canvas id="canvas"></canvas>

Answer 2

你也可以使用2幅画布，但要让它们充当层次，即＆＃34;堆叠它们＆＃34;使用绝对定位。

有a helpful article here, written by James Litten

我开始fiddle;它需要一些调整以满足您的需求（代码与片段相同）

＆＃13;

var layer1 = document.getElementById("layer1");
var layer2 = document.getElementById("layer2");
var ctx1 = layer1.getContext("2d");
var ctx2 = layer2.getContext("2d");

var img1 = loadImage('http://www.rachelgallen.com/images/purpleflowers.jpg', main);
var img2 = loadImage('http://www.rachelgallen.com/images/yellowflowers.jpg', main);

var imagesLoaded = 0;

function main() {
  imagesLoaded += 1;

  if (imagesLoaded == 2) {
    // set alpha for individual images as desired
    ctx1.globalAlpha = 0.8;
    ctx2.globalAlpha = 0.5;
     drawAll();
  }
}

function draw1() {
  frameRate = 30;
  ctx1.clearRect(0, 0, 250, 150);
  ctx1.beginPath();
  ctx1.rect(0, 0, 250, 150);
  ctx1.drawImage(img1, 0, 0); //draw 1st image
  ctx1.closePath();
}

function draw2() {
  frameRate = 60;
  ctx2.clearRect(0, 0, 250, 150);
  ctx2.beginPath();
  ctx2.rect(0, 0, 250, 150);
  ctx2.drawImage(img2, 0, 0); //draw 2nd image
  ctx2.closePath();
}

function drawAll() {
  draw1();
  draw2();
}

function loadImage(src, onload) {
  var img = new Image();

  img.onload = onload;
  img.src = src;

  return img;
}

＆＃13;

#layer1,
#layer2 {
  position: absolute;
  top: 0;
  left: 0;
}

＆＃13;

<canvas id="layer1">

</canvas>
<canvas id="layer2">

</canvas>

＆＃13;

在画布上以不同的速率绘制图像

2 个答案: