如何在node.js中创建canvas元素并与之交互？

Question

我正在Node.js中编写一个画布驱动的多用户绘图应用程序，并希望使用当前绘图维护内部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');

还有其他方法可以解决这个问题吗？

Answer 1

大型Javascript数组并不像您想象的那么慢（相对于Canvas操作）。 我用noVNC （我制作的HTML5 VNC客户端）做了很多性能测试，发现经常对Javascript数组进行操作比Canvas操作更快。 它实际上取决于你正在做什么类型的修改（变换和复杂的行可能会更快，因为Canvas ops）。 因此，我建议在您决定之前对两种选项进行性能测试。

事实上，我已经完成了使用imageData数组作为存储格式而不是普通Javascript数组的测试，而imageData（尽管它们应该是二进制数组）最终减慢约50％（在Chrome中反正）:-(

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 ++实现，要么就是ATM运气不好。

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

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

但它看起来并没有以任何方式生产就绪，代码实际上是稀疏的，并且只有表面创建的测试。 可能链接器在这里做了一些魔术，并将cairo的东西暴露给节点，但即便如此，这只会暴露cairo函数的自我，并且仍然必须在其上实现2DContext规范。