body{
  background: #DAE8F4;
  color: #3b4347;
}

canvas{
  width: 100%;
}

//------画像のアニメーション-----//
// 表示するcanvasを用意
let app = new PIXI.Application(800, 600, {backgroundColor : 0xDAE8F4});
document.body.appendChild(app.view);

// イメージを指定
let hayachi = PIXI.Sprite.fromImage('http://hayachi.github.io/images/hayachi-blue.png');

// 画像のアンカーポイントの指定
hayachi.anchor.set(0.5);

// 画像を画面中央に移動
hayachi.x = app.screen.width / 2;
hayachi.y = app.screen.height / 2.5;

// ステージに表示させる
app.stage.addChild(hayachi);

// アニメーションの再生、ループ
app.ticker.add(function(delta) {
    // 画像を回転
    hayachi.rotation += 0.1 * delta;
});

//------テキストの描画-----//

// スタイルを指定
let styleBig = new PIXI.TextStyle({
    fontFamily: 'Comfortaa',
    fontSize: 70,
    align: 'center',
    wordWrapWidth: 1000,
    wordWrap: true
});
let styleSmall =  new PIXI.TextStyle({
    fontFamily: 'Comfortaa',
    fontSize: 40,
    align: 'center',
    wordWrapWidth: 1000,
    wordWrap: true
});

// スタイルを反映
let textBig = new PIXI.Text('Pixi.js', styleBig);
let textSmall = new PIXI.Text('Standard animation', styleSmall);

// テキストの位置を指定
textBig.x = 300;
textBig.y = 430;
textSmall.x = 180;
textSmall.y = 530;

// ステージに表示させる
app.stage.addChild(textBig);
app.stage.addChild(textSmall);