HTML5畫布：從形狀到物體？

我一直在修補html5 canvas元素一段時間。這是非常有用的，但我覺得非常非常有限，因爲我顯然無法用對象（非本地）組織畫布。例如，如果我繪製一個矩形或任何其他形狀，我真的覺得能夠在腳本中的其他位置訪問其不同屬性是非常有用的。相反，看起來他們只是保持着畫圖，而且你必須手動跟蹤畫布上的內容，清除它並在你想改變任何東西時再次重寫它。HTML5畫布：從形狀到物體？

我的問題是：我錯過了什麼？ JavaScript是否爲我們提供了處理畫布內對象的方法？如果不是，有沒有圖書館可以做到這一點？你會說哪一個是最好的？

來源

2011-10-29 Cystack

這正是我建立[fabric.js]（http://kangax.github.com/fabric.js/demos/）庫的原因 - 爲canvas提供了一個方便的對象模型。看看它;我希望它有幫助。 – kangax

我會立即 – Cystack

畫布與其他繪畫工具沒有任何區別。你真的有有來跟蹤你正在繪製什麼。訣竅是你如何做到這一點。爲它使用對象實際上是個不錯的主意，它並不那麼難。您只需將畫布的context傳遞給任何對象，以便它與畫布進行交互並在其上繪製。所以如果你有一個名爲Foo的對象，你可以讓對象決定如何繪製它。例如，它可以有一個方法，像這樣：

function Foo() { 
    this.draw = function(context) { 
    context.restore(); 
    context.fillStyle = "rgb(200,0,0)"; 
    context.fillRect (10, 10, 55, 50); 
    context.save(); 
    // And so on... 
    }

在您的主繪圖循環中，您可能有類似下面的代碼：

// ... Various init - remember to set the context and store the Foo object somewhere 
foo.draw(context); 
// ...

這將允許你創建自己的繪圖方法的對象。當然有幾種方法可以做到這一點，但這個方法的優點是它非常模塊化。如果你想要，你可以有幾種類型的對象，從一些漂亮的工具繼承相同的泛型類型，等等...... 希望有幫助！

P.S .:我只記得關於整個HTML 5/canvas的一個精彩教程：It's on MDN here。

來源

2011-10-29 11:07:26

yup幫助很多，基本上你建議從對象到畫布，而不是其他方式，這是有聲的，但沒有像本地函數那樣強大來處理容易形狀。無論如何，你的解決方案是非常模塊化的，我試了一下。 PS：這是我一直在使用的教程，通過閱讀這些內容讓我意識到我帶來的缺點：p – Cystack

heh darn。我希望這個教程可以幫助..但是。我必須承認我不是JavaScript專家，但我已經看到這種方法在很多很酷的項目中使用。反過來說 - 如果我說得對 - 將需要對畫布對象進行深度刺痛。我不確定這會有什麼好處，但是我再一次沒有看到確切的實施。 –

HTML5畫布：從形狀到物體？

回答

相關問題