canvas drawImage（）并不总是可见的[重复]

Question

这个问题在这里已有答案：

• assign onclick event to function 2回答

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分配任何有意义的东西。

你打算做什么是在调用render()时调用image.onload，在这种情况下你应该使用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秒，它的成功取决于该延迟是大于还是小于下载图像或从缓存提供图像的网络延迟。