如何在Node.js中创建和交互Canvas元素？

Question

我正在使用Node.js编写一个基于canvas的多用户绘图应用程序，并希望维护一个内部canvas元素来保存当前绘画。在Node.js中是否可以创建和交互canvas元素？

我的最新尝试是使用jsdom模块，可在此处找到：http://github.com/tmpvar/jsdom

var jsdom = require('jsdom');
var window = jsdom.jsdom().createWindow();
var canvas = window.document.createElement('canvas');
// The following line works
canvas.setAttribute('width', 1000);
// The following line errors out on execution:
var context = canvas.getContext('2d');

有其他方法吗？

- Tom Frost

Answer 1

大型的Javascript数组并不像你想象的那么慢（相对于Canvas操作）。我已经对noVNC（我制作的HTML5 VNC客户端）进行了大量性能测试，并发现在Javascript数组上执行操作通常比Canvas操作更快。这实际上取决于您要进行的修改类型（转换和复杂线条可能作为Canvas ops更快）。因此，在决定之前，我建议您对两个选项进行性能测试。

事实上，我已经测试过使用imageData数组作为存储格式而不是普通的Javascript数组，并且imageData（即使它们应该是二进制数组）最终会变得慢50％左右（至少在Chrome中）：-(

- kanaka

Answer 2

jsdom只实现了DOM接口，但绘图上下文并不是该接口的一部分。

要获得您想要的内容，必须实现2D上下文：
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#canvas-context-2d

我猜可以使用巨大的数组在JS中完成...但速度会非常慢。因此，要么有人开始为Node编写C/C++实现，要么您目前没有运气。

我想你需要内部状态来初始化新客户端，对吗？ 在这种情况下，您可以将绘图操作推送到堆栈上，并将其发送给客户端，然后客户端弹出堆栈，直到达到绘图的当前状态。

编辑
好吧，显然在GitHubs上有一些东西：
http://github.com/joshthecoder/crayon

但这似乎并不完全能够投入生产使用，代码非常稀少，只有一个表面创建的测试。或许连接器在这里执行了一些魔法，并将cairo功能暴露给了节点，但即使如此，也仅会暴露cairo函数本身，还需要在其基础上实现2DContext规范。

- Ivo Wetzel

---

你说得一点没错：）。你的建议正是我现在正在使用的，但我的目标是一个超级大的缓冲区，它比一长串行数组更容易转移，例如基于base64编码的png画布导出。不幸的是，似乎没有任何Node.js图形库能够胜任这项任务，所以目前看来我只有使用堆栈了。谢谢！ - Tom Frost

我编辑了我的问题，如果你真的致力于你的绘图应用程序，也许你可以以此为基础。 - Ivo Wetzel