円を描いてランダムな色で塗る -『CreateJS』

CreateJsを使って円をcanvasに描いてみます。

リファレンスはいろいろな形のシェイプを描画するまでのCreateJS基礎にて参照。

JavaScript


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

share

related