画布drawImage（）并不总是可见[重复]

Question

20% 的时间图像显示，80% 的时间画布为空白（纯红色）。通过查看控制台，您可以看到图像在渲染函数中始终可用。

您可以通过点击Run code snippet 然后点击Hide Results 几次来复制它。

我在这里错过了什么？

如果您取消注释 window.requestAnimationFrame(render);，图像将 100% 显示。但显然我不想继续迭代静态图像。

const canvas = document.querySelector('canvas');
      canvas.width = 500;
      canvas.height = 500;

const context = canvas.getContext('2d');

const image = new Image();
      image.onload = window.requestAnimationFrame(render);
      image.src = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/49240/2.jpg';

function render() {
  console.log('render', image);
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.drawImage(image, 0, 0, image.width, image.height);

  // window.requestAnimationFrame(render);
} 

canvas {
  background: red;
}

<canvas></canvas>

Answer 1

requestAnimationFrame(render) 被立即调用，它的返回值不是函数，它是一个可以传递给cancelAnimationFrame() 的句柄。你没有为image.onload分配任何有意义的东西。

你的意思是在调用image.onload时调用render()，在这种情况下你应该使用image.addEventListener('load', render);

const canvas = document.querySelector('canvas');
      canvas.width = 500;
      canvas.height = 500;

const context = canvas.getContext('2d');

const image = new Image();
      image.addEventListener('load', render);
      image.src = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/49240/2.jpg';

function render() {
  console.log('render', image);
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.drawImage(image, 0, 0, image.width, image.height);
} 

canvas {
  background: red;
}

<canvas></canvas>

您的代码行为不一致的原因是您不小心创建了一个竞态条件。由于render() 在一定延迟后被调用，通常requestAnimationFrame() 为1/60 秒，它的成功取决于该延迟是否大于或小于用于下载图像或从缓存提供图像的网络延迟。