我正在尝试创建一个屏幕外渲染画布的基本示例，但我在 js 中出错“无法读取上下文属性”。实际上我的想法是像我在https://yalantis.com/ 中看到的那样创建一个演示我想创建我的名字首字母。如果有更好的想法来实现这一点，请赐教。感谢这是我在实际实施之前的基本尝试:)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Off Screen Canvas</title>
<script>
function createOffscreenCanvas() {
var offScreenCanvas= document.createElement('canvas');
offScreenCanvas.width= '1360px';
offScreenCanvas.height= '400px';
var context= offScreenCanvas.getContext("2d");
context.fillRect(10,10,200,200);
}
function copyToOnScreen(offScreenCanvas) {
var onScreenContext=document.getElementById('onScreen').getContext('2d');
var offScreenContext=offScreenCanvas.getContext('2d');
var image=offScreenCanvas.getImageData(10,10,200,200);
onScreenContext.putImageData(image,0,0);
}
function main() {
copyToOnScreen(createOffscreenCanvas());
}
</script>
<style>
#onScreen {
width:1360px;
height: 400px;
}
</style>
</head>
<body onload="main()">
<canvas id="onScreen"></canvas>
</body>
</html>
工作代码：
var canvas = document.createElement('canvas');
var offscreen = canvas.transferControlToOffscreen();
使用时.getContext()：
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var offscreen = canvas.transferControlToOffscreen();
// InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable
进一步的尝试也不起作用：
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
delete ctx;
var offscreen = canvas.transferControlToOffscreen();
甚至是这样：
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
ctx.reset();
delete ctx;
var offscreen = canvas.transferControlToOffscreen();
没有什么改变，webgl而不是2d
那么，我怎样才能得到画有东西的画布的屏幕外，然后将其发送给工作人员呢？或者我必须使用类似的东西getImageData()并将结果与全新画布的屏幕外一起发送，然后让工作人员复制 …