Chapter 36

PlainElementを使ってCanvas描画する

alkn203
alkn203
2021.09.18に更新

plainelement

PlainElementクラス

  • phina.display.PlainElementは、内部にCanvasクラスを持っているだけのシンプルなクラスです。
  • 内部にphina.graphics.Canvasクラスを持っているので、Canvasで使えるメソッドは一通り使うことができます。
  • phins.jsCanvasクラスは機能が拡張されており、デフォルトのメソッドに加え、簡単に線を描画できるdrawLineなど便利なメソッド群が追加で実装されています。

PlainElementクラスの使い方

以下のようにシーンに追加します。

// canvas要素描画用
var elem  = PlainElement({
  width: this.gridX.width,
  height: this.gridY.width, 
}).addChildTo(this).setPosition(this.gridX.center(), this.gridY.center());
  • 意図する位置に描画するために、大きさを画面のサイズに合わせて、中央に配置するのがポイントです。

線を描画する例

// 直線を描画
elem.canvas.context.strokeStyle = 'yellow';
elem.canvas.context.lineWidth = 6;
elem.canvas.drawLine(50, 50, 320,480);
  • this.canvasでcanvasを参照できますので、contextで色を指定して、拡張メソッドdrawLineで2点を結ぶ直線を引いています。

サンプルコード

コードを見る
phina.globalize();
// メインシーン
phina.define('MainScene', {
  superClass: 'DisplayScene',
  // コンストラクタ
  init: function() {
    // 親クラス初期化
    this.superInit();
    // 背景色指定
    this.backgroundColor = 'black';
    // canvas要素描画用
    var elem  = PlainElement({
      width: this.gridX.width,
      height: this.gridY.width, 
    }).addChildTo(this).setPosition(this.gridX.center(), this.gridY.center());
    // 直線をg描画
    elem.canvas.context.strokeStyle = 'yellow';
    elem.canvas.context.lineWidth = 6;
    elem.canvas.drawLine(50, 50, 320,480);
  },
});
// メイン
phina.main(function() {
  var app = GameApp({
    startLabel: 'main',
  });
  app.run();
});

runstantプロジェクト

https://runstant.com/alkn203/projects/98ad9ffb