Question

以下是我知道该怎么做：

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

这是我想做的事情：

var buffer=CanvasRenderingContext2D();

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

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

如果有任何关于这些主题的任何信息（网络工作者和绘图或实例化CanvasRenderingContext2D的方法），请告诉我们！

谢谢！

编辑：

作为参考，我的项目的上下文是创建一个游戏循环。我已经注意到绘图几乎是我最常用的CPU任务，根据使用Chrome开发工具完成的配置文件，我的cpu占据了高达10％的cpu。如果有一些方法可以在Web工作者上执行所有图像缓冲，然后将渲染上下文（或其他内容）传递回主文档线程以对显示画布进行最终绘制，那么这将是一个很大的负担。主线程，它将处理对requestAnimationFrame的输入和重复调用，这将处理最终绘制到＆＃34;画布＆＃34;元件。

现在，我不确定这是否可行，就像我之前说过的那样，但是我已经看了很多教程，说网络工作者非常适合图像编辑应用程序（尽管他们都没有去过）细节）。也许这是指过滤器函数循环遍历图像中的每个像素并执行cpu密集型过滤器功能，但实际上，如果这些函数可以访问图像数据阵列，那么为什么我无法访问用于同一Web工作者的基本绘图操作的图像？

无论如何，这是项目的上下文：创建一个游戏循环，可以处理Web worker中的缓冲图像，这样主线程就可以专注于更新显示＆＃34; canvas＆＃34;元素和收集用户输入。

Answer 1

Web worker本身不支持DOM对象。

所以画布的CanvasRenderingContext2D在网络工作者中并不是原生的。

要在Web worker中获取CanvasRenderingContext2D，您必须重现其所有方法和属性（或至少应用程序所需的方法和属性）。

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

GitHub的Automattic Group已经完成了为NodeJS创建html5画布支持：https://github.com/Automattic/node-canvas/tree/master/src您可以将此作为起点并将其所需部分转换为javascript。这仍然是一项艰巨而艰巨的任务。

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

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

我不知道有谁为此完成了代码。它更常见于：

马歇尔数据从主线程到工人。
使用worker中的代码创建所需的数据。
马歇尔数据从工人回到主线程。

有没有办法实例化CanvasRenderingContext2D对象而没有在web worker中使用的文档？

1 个答案: