【CreateJS】outlineで文字をアウトライン表示するサンプル

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

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

対象.outline = 1;

outlineは描画するテキストを枠文字にするプロパティです

指定する数値は、枠線のサイズになります

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

outlineで文字列をアウトライン表示するサンプルコード

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;
　　　　　//outlineで枠線文字に
         hw.outline = 2;//stageを更新
        stage.update();
}
init();

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

Posted by Yousuke.U