Pixi.js 基础知识（五）

参考：
https://github.com/kittykatattack/learningPixi

基本图形的绘制

矩形

var rectangle = new Graphics();
rectangle.lineStyle(4, 0xFF3300, 1);
rectangle.beginFill(0x66CCFF);
rectangle.drawRect(0, 0, 64, 64);
rectangle.endFill();
rectangle.x = 170;
rectangle.y = 170;
stage.addChild(rectangle);

圆形

var circle = new Graphics();
circle.beginFill(0x9966FF);
circle.drawCircle(0, 0, 32);
circle.endFill();
circle.x = 64;
circle.y = 130;
stage.addChild(circle);

椭圆形

var ellipse = new Graphics();
ellipse.beginFill(0xFFFF00);
ellipse.drawEllipse(0, 0, 50, 20);
ellipse.endFill();
ellipse.x = 180;
ellipse.y = 130;
stage.addChild(ellipse);

线条

var line = new Graphics();
line.lineStyle(4, 0xFFFFFF, 1);
line.moveTo(0, 0);
line.lineTo(80, 50);
line.x = 32;
line.y = 32;
stage.addChild(line);

多边形

var path = [ 
  point1X, point1Y, 
  point2X, point2Y, 
  point3X, point3Y
];
graphicsObject.drawPolygon(path);

绘制基本文字

var message = new Text( 
  "Hello Pixi!", 
  {font: "32px sans-serif", fill: "white"}
);
message.position.set(54, 96);
stage.addChild(message);