Question

工作代码：

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()的东西并将结果发送到全新画布的屏幕外，并让工作人员使用putImageData()复制？我不想进行这些其他操作（因为运行速度会变慢）。

另一种方法是使用cloneNode()，但不会复制画布图像。

我已经仔细研究了画布和上下文的所有方法，但似乎没有任何方法可以解决问题。

我使用的FF 67启用了屏幕外功能。我想Chrome没什么区别。

Answer 1

这很简单：您不能从具有渲染上下文的画布上转移控制权。

但是您可以：

const canvas = new OffscreenCanvas(100, 1);
const ctx = canvas.getContext('2d');

与做相同：

var canvas = document.createElement('canvas');
var offscreen = canvas.transferControlToOffscreen();
var ctx = offscreen.getContext('2d');

transferToImageBitmap最后，

var bitmap = offscreen.transferToImageBitmap();

希望这会有所帮助！

JS canvas getContext然后transferControlToOffscreen

1 个答案: