Pixi.js Polygon

pixijs-polygon.png
    var graphics = new PIXI.Graphics();
   graphics.lineStyle(2, GREEN);//線の太さと色を指定
   p=[0,3, 3,0, -3, -3];
   graphics.drawPolygon(p);
   stage.addChild(graphics);

配列を作ってdrawPolygon関数に渡すと描画できます

フルソースコード

[[html]]
<script src="https://rawgit.com/pixijs/pixi.js/master/bin/pixi.min.js"></script>
</script>
<script type='text/javascript' >
var size=300;
var half_size=size/2.0;
var scale=half_size/3.0;
var GREEN=0xA5D9DD;
var textstyle={font:'bold 18pt Arial', fill:'white'};
var stage = new PIXI.Container();
//真ん中(0,0)範囲(±3)の座標からpixi.jsの座標に変換する
function conv(x,y){
   return new PIXI.Point(x*scale+half_size,size-(y*scale+half_size));
}
function cx(x){
   return x*scale+half_size;
}
function cy(y){
   return size-(y*scale+half_size);
}
 
var renderer = new PIXI.WebGLRenderer(size, size, {backgroundColor: 0x533E25,antialias: true,transparent:true});
document.body.appendChild(renderer.view);
 
    var graphics = new PIXI.Graphics();
   graphics.lineStyle(2, GREEN);//線の太さと色を指定
   p=[cx(0),cy(3),cx(3), cy(0),cx(-3), cy(-3)];
   graphics.drawPolygon(p);
   stage.addChild(graphics);
 
stage.interactive = true;
stage.mousemove=  function(mouseData) {
 var x = renderer.plugins.interaction.mouse.global.x;
 var y =  renderer.plugins.interaction.mouse.global.y;
 
graphics.clear();
graphics.lineStyle(2, GREEN);//線の太さと色を指定
p[0]=x;
p[1]=y;
   graphics.drawPolygon(p);
}
//アニメーションスタート
animate();
function animate() {
    requestAnimationFrame(animate);
    renderer.render(stage);
}
</script>
<body>
</body>
[[/html]]

pixijs-triangle

サポートサイト Wikidot.com pixijs-triangle