javascript - 有没有办法在没有文档的情况下实例化 CanvasRenderingContext2D 对象以供网络 worker 使用？

Question

这是我知道该怎么做:

var buffer=document.createElement("canvas").getContext("2d");

这就是我想做的:

var buffer=CanvasRenderingContext2D();

这可能吗？有没有办法在没有文档的 createElement 方法的情况下创建 CanvasRenderingContext2D 对象？

我想知道的原因是因为我正在与网络工作人员一起工作，并且我想看看是否可以将一些绘图移给工作人员。绘图操作将保留在单独的线程中，而显示 Canvas 的最终渲染将在主文档线程中完成。我也不确定这是否可能。

如果有人有任何关于这些主题的信息(网络 worker 和绘图或实例化 CanvasRenderingContext2D 的方法)，请告诉我!

谢谢!

编辑:

作为引用，我的项目的上下文是创建一个游戏循环。我注意到绘图几乎是我最消耗 CPU 资源的任务，根据 Chrome 开发工具完成的配置文件，它消耗了我 10% 的 CPU 资源。如果有某种方法可以在 Web Worker 上完成所有图像缓冲，然后将渲染上下文(或其他内容)传递回主文档线程以在显示 Canvas 上进行最终绘制，那么这将是一个巨大的负载主线程，它将处理输入和对 requestAnimationFrame 的重复调用，后者将处理“canvas”元素的最终绘制。

现在，我不确定这是否可能，就像我之前所说的那样，但我看过很多教程，这些教程都说网络 worker 非常适合图像编辑应用程序(尽管没有一个详细介绍)。也许这是指循环图像中每个像素并执行 CPU 密集型过滤函数的过滤函数，但实际上，如果这些函数可以访问图像数据数组，那么为什么我无法访问图像在同一个 Web Worker 中进行基本绘图操作？

无论如何，这就是该项目的背景:创建一个游戏循环，可以处理 Web Worker 中的缓冲图像，以便主线程可以专注于更新显示“canvas”元素并收集用户输入。

Answer 1

Web Worker 本身并不支持 DOM 对象。

因此，canvas 的 CanvasRenderingContext2D 在 Web Worker 中本身不可用。

要在 Web Worker 中获取 CanvasRenderingContext2D，您必须重现其所有方法和属性(或者至少复制您的应用所需的方法和属性)。

这显然是一项艰巨的任务。

GitHub 的 Automattic Group 已经做到了这一点，为 NodeJS 创建 html5 canvas 支持:https://github.com/Automattic/node-canvas/tree/master/src您可以使用它作为起点，并将其所需部分转换为 JavaScript。这仍然是一项艰巨的任务。

但是还有更多工作要做......

重新创建所需的方法和属性并在工作线程上完成工作后，您仍必须将 CanvasRenderingContext2D 属性编码回主线程。您还必须将 web-worker-rendering-context 绘制回主线程的像素数据编码。

我不知道有谁为此编写过代码。更常见的是:

• 将数据从主线程编码到工作线程。
• 使用工作器中的代码创建所需的数据。
• 将数据从工作线程编码回主线程。