HTML5 Canvas：從形狀到對象？

Question

我一直在修補html5 canvas元素一段時間。 它非常有用，但是我覺得非常非常有限，因為我顯然不能用對象組織畫布（不是原生的）。

例如，如果我繪制一個矩形或任何其他形狀，我會發現能夠在腳本中的其他位置訪問其不同的屬性是有用的。 而不是那樣，它們似乎只是保留，好吧，圖紙，你必須手動跟蹤畫布上的內容，並清除它並在你想要改變任何東西時重新重寫它。

我的問題是：我錯過了什么嗎？ JavaScript是否為我們提供了處理畫布內對象的方法？ 如果沒有，是否有圖書館已經這樣做了？ 你會說哪一個最好？

Answer 1

畫布與任何其他繪圖工具並沒有什么不同。 你真的必須跟蹤你畫的是什么。 訣竅在於你是如何做到的。 實際上使用對象是一個非常好的主意，並不是那么難。 您只需要將畫布的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);
// ...

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

PS：我剛剛記得關於整個HTML 5 / canvas的精彩教程： 這是在MDN上 。