Pixi.jsで三角形を描画する

pixijs-triangle.png

drawPolygon関数を使用しても描画できます->Pixi.js polygon
drawShapeでもok

<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);//線の太さと色を指定
    graphics.moveTo(cx(0),cy(3));
    graphics.lineTo(cx(3), cy(0));//線の終点
    graphics.lineTo(cx(-3), cy(-3));
    graphics.lineTo(cx(0),cy(3));
   stage.addChild(graphics);
 
   //描画関数開始
   renderer.render(stage);
</script>
<body>
</body>

triangle

サポートサイト Wikidot.com triangle