Javascript 无法克隆OffscreenCanvas，因为它已分离_Javascript_Html5 Canvas_Offscreen Canvas

Javascript 无法克隆OffscreenCanvas，因为它已分离

javascript html5-canvas

Javascript 无法克隆OffscreenCanvas，因为它已分离,javascript,html5-canvas,offscreen-canvas,Javascript,Html5 Canvas,Offscreen Canvas,昨天回到我的爱好HTML画布，并尝试在单独的线程中进行渲染，只是为了在控制台中面对以下错误：未捕获的DomeException:未能对“Worker”执行“postMessage”：无法克隆OffscreenCanvas，因为它已分离。大体上（） [index.html] <!DOCTYPE HTML> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1

昨天回到我的爱好HTML画布，并尝试在单独的线程中进行渲染，只是为了在控制台中面对以下错误：

未捕获的DomeException:未能对“Worker”执行“postMessage”：无法克隆OffscreenCanvas，因为它已分离。大体上（）

[index.html]

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="cache-control" content="must-revalidate" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
<meta charset="UTF-8" />
<title>OffscreenCanvas</title>
</head>
<body>
  <div id='wrapper'>
    <div id='content'>
      <canvas id="testcanvas" width="512" height="512"></canvas>
    </div>
  </div>
</body>
<script>
'use strict';

document.body.onload = function () {
  var canvas = document.getElementById('testcanvas');
  canvas.imageSmoothingEnabled = false;

  const offscreenCanvas = canvas.transferControlToOffscreen();

  const worker = new Worker('render.js');

  var speed = 100;

  var currentTime = 0; var timeDiff = 0; var lastTime = 0;
  var timeProduct = 0; var dTime = 0; var timeScale = 1; var timeStep = 0.01;

  var posX = 10; var posY = 10;

  function main() {
    currentTime = performance.now();
    timeDiff = (Math.abs(currentTime - lastTime) * 0.001);
    dTime += Math.min(timeDiff, 1);
    timeProduct = timeStep * timeScale;

    while (dTime > timeProduct) {
      //draw();
      worker.postMessage({canvas: offscreenCanvas, posX: posX, posY: posY}, [offscreenCanvas]);
      dTime -= timeProduct;
    }

    lastTime = currentTime;

    posX += speed * timeDiff;
    posY += speed * timeDiff;

    if (posX > 500) posX = 10;
    if (posY > 500) posY = 10;

    requestAnimationFrame(main);
  }

  requestAnimationFrame(main);
};
</script>
</html>

我不知道是什么原因导致此错误-代码仅在主线程中运行时工作正常，并且已经检查了一些站点，我确信控件已发送到屏幕外：\

您应该只向工作人员发送一次屏幕外NVA：

worker.postMessage({canvas: offscreenCanvas}, [offscreenCanvas]);

while (dTime > timeProduct) {
    worker.postMessage({ posX, posY });
    dTime -= timeProduct;
}

worker.postMessage({canvas: offscreenCanvas}, [offscreenCanvas]);

while (dTime > timeProduct) {
    worker.postMessage({ posX, posY });
    dTime -= timeProduct;
}