【CreateJS】drawRectで四角形を描画するサンプル

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

「CreateJS」でShape()を使って四角形を描画するサンプルコードです

drawrect(X座標,Y座標,幅,高さ)

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

Shape()を使って四角形を描画するサンプルコード

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);

        //drawrect()で四角形を描画する        let rect = new createjs.Shape();
        rect.graphics.beginFill("#4CAF50").drawRect(0, 0, 100, 100);
        rect.x = 200;
        rect.y = 100;
        stage.addChild(rect);//stageを更新
        stage.update();
}
init();

new createjs.Shape()で図形を定義しdrawrect()で四角形を描画します drawrect()の引数は(X座標,Y座標,幅,高さ)、デフォルトでの始点は左上になります

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

Posted by Yousuke.U