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规范。

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

2 个答案: