Pixi.jsで線を引く

pixijs-line.png

<script src="https://rawgit.com/pixijs/pixi.js/master/bin/pixi.min.js"></script>
</script>
<script type='text/javascript' >
//アンチエイリアスを有効にする
var renderer = new PIXI.WebGLRenderer(200, 200, {backgroundColor: 0x533E25,antialias: true});
//<canvas>要素をbodyに追加します
document.body.appendChild(renderer.view);
 
//まず、 ルートコンテナを作成しないといけません。描画シーンのコンテナになります。
    var stage = new PIXI.Container();
    var graphics = new PIXI.Graphics();
   graphics.lineStyle(8, 0xA5D9DD);//線の太さと色を指定
    graphics.moveTo(20, 20);//線の始点
    graphics.lineTo(180, 180);//線の終点
    graphics.moveTo(180, 20);//2本目の線の始点
    graphics.lineTo(20, 180);//線の終点
   stage.addChild(graphics);//作成した四角をシーンに追加
   //描画関数開始
   renderer.render(stage);
</script>
<body>
</body>

サポートサイト Wikidot.com