HTML5 Canvas：从形状到对象？

Question

我已经修补 html5 canvas 元素有一段时间了。它非常有用，但我感觉非常非常有限，因为我显然无法用对象（不是原生的）组织画布。

例如，如果我绘制一个矩形或任何其他形状，我真的会发现能够在脚本中的其他位置访问其不同属性很有用。相反，它们似乎只是保留了绘图，您必须手动跟踪画布上的内容，并清除它并在您想要更改任何内容时再次重写。

我的问题是：我错过了什么吗？JavaScript 是否为我们提供了处理画布内对象的方法？如果没有，是否有图书馆已经这样做了？你说哪一个最好？

Answer 1

Canvas 与任何其他绘图工具实际上没有什么不同。你确实必须跟踪你所画的内容。诀窍在于你如何去做。使用对象是一个非常好的主意，而且并不难。您只需将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 上。