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

您打算做的是在调用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秒）后才被调用，因此其成功取决于该延迟是大于还是小于下载图像或提供服务的网络延迟从缓存中获取。

画布drawImage（）并不总是可见的

1 个答案: