在 Mac Safari 中，第二个或更高版本drawImage 比第一个 drawImage 花费更多的时间是什么原因

编程问答 2022-06-01

问题描述

查看以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <Meta charset="UTF-8">
  <Meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    setTimeout(() => {

      const width = 1000;
      const height = 600;

      const canvas = document.createElement('canvas');
      document.body.appendChild(canvas);
      canvas.width = width;
      canvas.height = height;
      const ctx = canvas.getContext('2d');

      const canvasDraft = document.createElement('canvas');
      canvasDraft.width = width;
      canvasDraft.height = height;
      const ctxDraft = canvasDraft.getContext('2d');

      ctx.clearRect(0,width,height);

      ctxDraft.clearRect(0,height);
      ctxDraft.fillStyle = 'blue';
      ctxDraft.fillRect(width * 0.5,height * 0.5,width * 0.5,height * 0.5);

      console.time('the first drawImage');
      ctx.drawImage(canvasDraft,height,height);
      console.timeEnd('the first drawImage'); // ==> 0.5ms

      ctxDraft.clearRect(0,height);
      ctxDraft.fillStyle = 'red';
      ctxDraft.fillRect(0,height * 0.5);

      console.time('the second drawImage');
      ctx.drawImage(canvasDraft,height);
      console.timeEnd('the second drawImage'); // ==> 5ms

      // comment above 3 lines and uncomment the codes below,would output 0.5ms
      // requestAnimationFrame(() => {
      //   console.time('the second drawImage');
      //   ctx.drawImage(canvasDraft,height);
      //   console.timeEnd('the second drawImage');
      // });
    },1000);

  </script>
</body>
</html>

在 Mac Safari 中，第一个 drawImage 花费大约 0.5ms，第二个花费大约 5ms。 （在 Chrome 中，它花费大约 0.1 毫秒）。

如果我将第二个 drawImage 移动到下一个刻度，它将花费 0.5 毫秒。任何人都可以解释为什么？如何使第二个 drawImage 花费更少的时间？我真的需要一次将图像从一个画布绘制到另一个画布。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

canvascompositioncompositioncompositiondrawimagesafari