PIXI 基本图形-PIXI文档翻译(6)

1、基本图形
使用图像纹理是制作精灵的最有用的方法之一，但Pixi也有自己的低级绘图工具。您可以使用它们来制作矩形，形状，线条，复杂的多边形和文本。并且，幸运的是，它使用与Canvas绘图API几乎相同的API，所以，如果你已经熟悉canvas，这里没有什么真正新的学习。但是最大的优点是，与Canvas绘图API不同，您使用Pixi绘制的形状是由GPU上的WebGL渲染的。Pixi允许您访问所有未使用的性能功率。让我们快速浏览如何制作一些基本形状。这里是我们将在代码中提出的所有形状。


[img]http://dl2.iteye.com/upload/attachment/0123/3474/5880245c-bdcf-3381-bbe1-be1d1a94e149.png[/img]

(1)矩形

所有形状都是先创建 Pixi 的 Graphics 实例来实现

var rectangle = new Graphics();

使用 beginFill 十六进制代码值填充矩形的内部颜色，填充浅蓝色如下：

rectangle.beginFill(0x66CCFF);

如果你想给形状一个外边框，使用lineStyle方法。这里是如何给矩形一个4像素宽的红色轮廓，alpha 值为1。

rectangle.lineStyle(4, 0xFF3300, 1);

使用drawRect方法来绘制矩形。它的四个参数x，y，width和height。

rectangle.drawRect(x, y, width, height);

完成后需要调用endFill方法

rectangle.endFill();

它就像Canvas绘图API！这里是所有的代码，你需要绘制一个矩形，改变其位置，并将其添加到舞台上。

var rectangle = new Graphics();
rectangle.lineStyle(4, 0xFF3300, 1