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);