var stage; function init() { // ステージオブジェクト作成 stage = new createjs.Stage('myCanvas'); // シェイプ作成 var shapeA = new createjs.Shape(); var shapeB = new createjs.Shape(); // 表示リストに追加 stage.addChild(shapeA); stage.addChild(shapeB); // 座標 shapeA.x = 50; shapeA.y = 50; shapeB.x = 50; shapeB.y = 50; // 描画 drawA(shapeA.graphics); drawB(shapeB.graphics); } // ランダムカラー生成 function randColorCreate () { var randNum = Math.floor(Math.random() * 0xFFFFFF); var randColor = createjs.Graphics.getRGB(randNum); return randColor; } function drawA (myGraphics) { var color = randColorCreate(); // 塗り myGraphics.beginFill(color).drawCircle(50,50,30); // 更新 stage.update(); } function drawB (myGraphics) { var color = randColorCreate(); myGraphics.beginStroke(color).setStrokeStyle(3).drawCircle(100,100,30); stage.update(); } init();
<div class="wrap"> <h1>create.js</h1> <p>丸を描く</p> <canvas id="myCanvas" width="300" height="260"></canvas> </div>