html5的canvas对象,javascript – HTML5 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.