昨天又回到了我对 HTML canvas 的爱好，并尝试在单独的线程中进行渲染，只是在控制台中面临以下错误：
未捕获的 DOMException：无法在“Worker”上执行“postMessage”：无法克隆 OffscreenCanvas，因为它已分离。
在主要（http://localhost:8000/responsivetemplate/:47:14)
[索引.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]
'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);
}
}
我不知道是什么原因导致此错误 - 代码仅在主线程中运行时工作正常，也已经检查了一些站点，我确信控件已发送到屏幕外：\
