【CreateJS】Textで文字列や数値を描画するサンプル

2019年6月12日CreateJS,JavaScriptライブラリ,JavaScript

「CreateJS」でText()を使って文字列や数値を表示するサンプルコードです

基本的な記述

createjs.Text(表示するテキスト,フォントスタイル,フォントカラー)

例

createjs.Text("Hello World", "bold 2em sans-serif", "white");

See the Pen CreateJS drawing Text by yochans (@yochans) on CodePen.

ext()で文字列や数値描画するサンプルコード

HTML

<!DOCTYPE html><html lang="ja">
<head>
<meta charset="utf-8">
<title>CreateJSサンプルコード</title>
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script src="main.js"></script>
</head>
<body>
<canvas id="main" width="500" height="300"></canvas>
</body></html>

main.js

function init() {
        //canvas id mainをstageに設定
        let stage = new createjs.Stage("main");

        //背景にする図形を作成
        let bg = new createjs.Shape();
        //背景にする四角形の色と位置・サイズを指定
        bg.graphics.beginFill("black").drawRect(0, 0, 500, 300);
        //背景にする四角形をstageに追加
        stage.addChild(bg);

        //Text()で文字列や数値を描画する         let hw = new createjs.Text("Hello World", "bold 2em sans-serif", "white");
          stage.addChild(hw);
          hw.x = 150;
          hw.y = 100;//stageを更新
        stage.update();
}
init();

スタイル属性や指定・取得には様々なclassが用意されています

EaselJS v1.0.0 API Documentation : Text

2019年6月12日CreateJS,JavaScriptライブラリ,JavaScript

Posted by Yousuke.U