问题描述
昨天回到了我对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;
}
这篇关于无法克隆 OffscreenCanvas，因为它已分离的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！