四角を描いてランダムな色で塗る -『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();
// 塗り
// drawRect(X, Y, 幅, 高さ)
myGraphics.beginFill(color).drawRect(0, 0, 50, 50);
// 更新
stage.update();
}
// 角丸四角
function drawB (myGraphics) {
var color = randColorCreate();
// drawRoundRect(X, Y,幅, 高さ, 角丸の幅, 角丸の高さ)
myGraphics.beginStroke(color).setStrokeStyle(3).drawRoundRect(100, 100, 50, 50, 10, 10);
//
stage.update();
}
init();
