円を描いてランダムな色で塗る -『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();
