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上 。