【发布时间】：2015-04-27 08:28:36
【问题描述】：
我知道该怎么做：
var buffer=document.createElement("canvas").getContext("2d");
这是我想做的：
var buffer=CanvasRenderingContext2D();
这可能吗？有没有办法在没有文档的createElement 方法的情况下创建 CanvasRenderingContext2D 对象？
我想知道的原因是因为我正在与网络工作者一起工作，我想看看我是否可以将一些绘图转移给工作者。绘图操作将保留在单独的线程中，对显示画布的最终渲染将在主文档线程中完成。我也不确定这是否可能。
如果有人对这些主题（网络工作者和绘图或实例化 CanvasRenderingContext2D 的方法）有任何信息，请告诉我！
谢谢！
编辑：
作为参考，我的项目的上下文是创建一个游戏循环。我注意到绘图几乎是我最密集的 cpu 任务，根据使用 Chrome 开发工具完成的配置文件，占用了我高达 10% 的 cpu。如果有某种方法可以在 Web Worker 上完成所有图像缓冲，然后将渲染上下文（或其他东西）传递回主文档线程以对显示画布进行最终绘制，那么这将是一个巨大的负担。主线程，它将处理输入和对requestAnimationFrame 的重复调用，它将处理对“canvas”元素的最终绘制。
现在，我不确定这是否可能，就像我之前所说的那样，但我看过很多教程说网络工作者非常适合图像编辑应用程序（尽管没有一个详细介绍）。也许这是指遍历图像中每个像素并执行 cpu 密集型过滤器功能的过滤器函数，但实际上，如果这些函数可以访问图像数据数组，那么为什么我不能访问图像在同一个 Web Worker 中的基本绘图操作？
无论如何，这就是项目的上下文：创建一个游戏循环，可以在 Web Worker 中处理缓冲图像，以便主线程可以专注于更新显示“画布”元素并收集用户输入。
【问题讨论】：
-
如果你想画线并使用 2d 上下文方法，我不知道，但如果正在绘制图像（使用 ArrayBuffer 和 rgba），你可以使用该数组与工作人员进行通信。 ..
-
即使你可以在worker中创建一个独立的上下文，你也无法将其传回；所以这种并行渲染似乎是不可能的。然而，大多数时候，您实际上可以使用上面提到的 ArrayBuffer 来组织任务。了解用例的细节可能会有所帮助。
-
我添加了一些细节。我确实计划使用可传输对象或 ArrayBuffer 对象在线程之间发送而不是克隆，以便更快地共享。但是我阅读的文档非常坚定地认为网络工作者无法访问 DOM……不确定这是否意味着直接访问或无法访问，但我没有看到任何关于能够在线程之间传递元素对象的信息，所以我猜你不能。
-
当他们说网络工作者非常适合图像编辑应用程序时，他们的意思就像 Juan Pablo 上面写的那样：你使用 ArrayBuffer 和
getImageData()并从那里开始。但据我了解，这不是你想要的。您想在工作人员中实际使用绘图 API。根据规范，这是不可能的，我怀疑自己重新实现 Canvas（如下所述）会以任何方式帮助提高性能。 WebGL 会，但那是另一回事了。 -
@KlimLee。实际上，我试图让重新实现
CanvasRenderingContext2D听起来太可怕以至于不值得（！）。稍后在我的回答中，我确实建议采用“更常见”的方式将数据编组给工作人员进行处理。 ;-)
标签： javascript html multithreading canvas web-worker