【CreateJS】drawCircleで円を描画するサンプル

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

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

See the Pen CreateJS drawing Circle 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);

        //drawCircle()で円を描画する        let circle = new createjs.Shape();
        circle.graphics.beginFill("#4CAF50").drawCircle(0, 0, 50);
        circle.x = 250;
        circle.y = 100;
        stage.addChild(circle);//stageを更新
        stage.update();
}
init();

new createjs.Shape()で図形を定義しdrawCircle()で円を描画します drawCircle()の引数は(中心のX座標,中心のY座標,半径)

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

Posted by Yousuke.U