如何創建node.js中的canvas元素並與其進行交互？

我在Node.js中編寫了一個基於畫布的多用戶繪圖應用程序，並且想要使用當前繪圖維護一個內部畫布元素。是否可以在Node.js中創建畫布元素並與其交互？如何創建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');

是否有任何其他的方式去嗎？

來源

2010-10-22 Tom Frost

jsdom只實現DOM接口，但繪圖上下文不是該接口的一部分。

爲了得到你想要的一個，就必須實現2D背景：
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#canvas-context-2d

我猜它可能被在JS使用一個龐大的陣列做...但它會是可怕的慢。因此，無論有人會繼續爲節點寫一個C/C++實現，還是你運氣不好。

我想你需要內部狀態來初始化新的客戶端，對嗎？在這種情況下，您可以將繪圖操作推送到堆棧並將其發送到客戶端，然後客戶端彈出堆棧直到他到達繪圖的當前狀態。

編輯
OK顯然有什麼東西比在GitHubs：
http://github.com/joshthecoder/crayon

但它看起來並不像這樣以任何方式生產做好準備，代碼確實是稀疏，有隻是一個測試用於表面創建。 MAYBE鏈接器在這裏做了一些魔術，並將cairo的東西暴露給節點，但即使如此，它也只會將cairo函數暴露給自己，並且還需要在其上實現2DContext規範。

來源

2010-10-22 12:16:59

你完全正確:)。你的建議是我現在正在使用的，但是我想要的是一個超級大緩衝區，它比一個巨大的行數更容易轉移，比如說，基於64位的png canvas導出。不幸的是，沒有任何一個Node.js圖形庫看起來可以忽略，所以看起來我現在被困在棧中。謝謝！ – 2010-10-22 12:21:09

我編輯了我的問題，也許你可以使用它作爲基礎，以防你真正致力於繪圖應用程序。 – 2010-10-22 12:27:26

大的Javascript數組並沒有你想象的那麼慢（相對於Canvas操作）。我用noVNC（我做的HTML5 VNC客戶端）做了很多性能測試，發現經常在Javascript陣列上操作比Canvas操作快。這實際上取決於你正在做什麼類型的修改（變換和複雜的行可能會更快，因爲Canvas操作）。所以我會建議在決定之前實際測試兩個選項的性能。實際上，我已經使用imageData數組作爲存儲格式而不是普通的Javascript數組進行了測試，並且imageData（即使它們應該是二進制數組）最終速度降低了大約50％（在Chrome中無論如何）： - （

來源

2010-10-22 14:28:31 kanaka

如何創建node.js中的canvas元素並與其進行交互？

回答

相關問題