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

2022-01-17 00:00:00 javascript html5-canvas offscreen-canvas

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

yesterday returned to my hobby with HTML canvas and tried to do a rendering in a separate thread, just to face the following error in the console:

未捕获的 DOMException:无法在Worker"上执行postMessage":无法克隆 OffscreenCanvas，因为它已分离.在主要(http://localhost:8000/responsivetemplate/:47:14)

Uncaught DOMException: Failed to execute 'postMessage' on 'Worker': An OffscreenCanvas could not be cloned because it was detached. at main (http://localhost:8000/responsivetemplate/:47:14)

[index.html]

[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>

[worker.js]

[worker.js]

'use strict';

var canvas;
var ctx;

function draw(posX, posY) {
  //clear
  ctx.setTransform(1,0,0,1,0,0);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "#000000";
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  //draw
  ctx.beginPath();
  ctx.moveTo(posX, posY);
  ctx.ellipse(posX,
              posY,
              5,
              5,
              0.7854,
              0,
              2 * Math.PI,
              false);
  ctx.strokeStyle = "white";
  ctx.stroke();
}

onmessage = function(ev) {
  if(ev.data) {
    if (!canvas) canvas = ev.data.canvas;
    if (!ctx) ctx = canvas.getContext('2d');
    var posX = ev.data.posX; var posY = ev.data.posY;
    draw(posX, posY);
  }
}

我不知道导致此错误的原因 - 代码仅在主线程中运行时工作正常，还检查了一些站点，我确定控件已发送到屏幕外:

I don't know what causes this error - code works fine when run only in the main thread, also already checked some sites and I'm sure the controll was sent to offscreen :

推荐答案

你应该只向worker发送一次OffscreenCanvas:

You should send OffscreenCanvas to worker only once:

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

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

相关文章