javascript - HTML5 Canvas : going from shapes to objects?

Question

我已经研究 html5 canvas 元素有一段时间了。它非常有用，但我感到非常、非常有限，因为我显然无法用对象(不是 native )组织 Canvas 。

例如，如果我绘制一个矩形或任何其他形状，我会发现能够在脚本的其他地方访问其不同属性非常有用。取而代之的是，它们似乎只是保留，好吧，绘图，您必须手动跟踪 Canvas 上的内容，清除它并在您想要更改任何内容时再次重写它。

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

Answer 1

Canvas 与任何其他绘图工具并没有什么不同。您确实拥有来跟踪您正在绘制的内容。诀窍在于你如何去做。为它使用对象是一个很好的主意，而且并不难。您只需将 Canvas 的 context 传递给任何对象，以便它与 Canvas 交互并在其上绘制。因此，如果您有一个名为 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 .