createJSのサンプルコード

1. 円を書く

var shape = new createjs.Shape();
// 赤い円
shape.graphics.beginFill("#ff0000");
shape.graphics.drawCircle(100, 100, 50);
// 緑の円
shape.graphics.beginFill("#00ff00");
shape.graphics.drawCircle(200, 100, 50);
// 青い円
shape.graphics.beginFill("#0000ff");
shape.graphics.drawCircle(300, 100, 50);

1. 赤丸を描画する

function init() {
      // Stageオブジェクトを作成。表示リストのルートになります。
      var stage = new createjs.Stage("myCanvas");

      // 円を作成します
      var shape = new createjs.Shape();
      shape.graphics.beginFill("DarkRed"); // 赤色で描画するように設定
      shape.graphics.drawCircle(0, 0, 100); //半径100pxの円を描画
      stage.addChild(shape); // 表示リストに追加
      shape.x = 200;
      shape.y = 100;

      // Stageの描画を更新
      stage.update();
    }

3.時計

 window.addEventListener("load", init);
    function init() {
      // Stageオブジェクトを作成。表示リストのルートになります。
      var stage = new createjs.Stage("myCanvas");

      // Text インスタンスを作成
      var label = new createjs.Text("", "80px sans-serif", "red");
      // Text インスタンスは一度だけしか stage に追加しない
      stage.addChild(label);

      // 時間経過のイベント
      createjs.Ticker.addEventListener("tick", handleTick);
      function handleTick() {
        // 現在時間を取得
        var now = new Date();

        // 時間の数値を取得
        var h = now.getHours(); // 時(0〜23)
        var m = now.getMinutes(); // 分(0〜59)
        var s = now.getSeconds(); // 秒(0〜59)

        // 表示文言を作成
        var time = h + ":" + m + ":" + s;
        // Text インスタンスの文字列を更新
        label.text = time;

        // Stageの描画を更新
        stage.update();
      }
    }

1. ボタン

window.addEventListener("load", init);
    function init() {
      // Stageオブジェクトを作成。表示リストのルートになります。
      var stage = new createjs.Stage("myCanvas");
      stage.enableMouseOver();

      // ボタンを作成
      var btn1 = createButton("Click Blue!", 150, 40, "#0275d8");
      btn1.x = 50;
      btn1.y = 80;
      stage.addChild(btn1);

      var btn2 = createButton("Click Red!", 150, 40, "#d9534f");
      btn2.x = 240;
      btn2.y = 80;
      stage.addChild(btn2);

      var btn3 = createButton("Click Green!", 150, 40, "#5cb85c");
      btn3.x = 430;
      btn3.y = 80;
      stage.addChild(btn3);

      // イベントを登録
      btn1.addEventListener("click", handleClick);
      btn2.addEventListener("click", handleClick);
      btn3.addEventListener("click", handleClick);
      function handleClick(event) {
        // クリックされた時の処理を記述
        alert(event.currentTarget + " がクリックされました。");
      }


      // 時間経過のイベント
      createjs.Ticker.addEventListener("tick", handleTick);
      function handleTick() {
        // Stageの描画を更新
        stage.update();
      }
    }

    /**
     * CreateJSのボタンを作成する関数です。
     * この関数でボタンを作ったらステージに追加したり、クリックイベントを登録しましょう。
     * @param {String} text ボタンのラベル文言です。
     * @param {Number} width ボタンの横幅(単位はpx)です。
     * @param {Number} height ボタンの高さ(単位はpx)です。
     * @param {String} keyColor ボタンのキーカラーです。
     * @returns {createjs.Container} ボタンの参照を返します。
     */
    function createButton(text, width, height, keyColor) {

      // ボタン要素をグループ化
      var button = new createjs.Container();
      button.name = text; // ボタンに参考までに名称を入れておく(必須ではない)
      button.cursor = "pointer"; // ホバー時にカーソルを変更する

      // 通常時の座布団を作成
      var bgUp = new createjs.Shape();
      bgUp.graphics
              .setStrokeStyle(1.0)
              .beginStroke(keyColor)
              .beginFill("white")
              .drawRoundRect(0.5, 0.5, width - 1.0, height - 1.0, 4);
      button.addChild(bgUp);
      bgUp.visible = true; // 表示する

      // ロールオーバー時の座布団を作成
      var bgOver = new createjs.Shape();
      bgOver.graphics
              .beginFill(keyColor)
              .drawRoundRect(0, 0, width, height, 4);
      bgOver.visible = false; // 非表示にする
      button.addChild(bgOver);

      // ラベルを作成
      var label = new createjs.Text(text, "18px sans-serif", keyColor);
      label.x = width / 2;
      label.y = height / 2;
      label.textAlign = "center";
      label.textBaseline = "middle";
      button.addChild(label);

      // ロールオーバーイベントを登録
      button.addEventListener("mouseover", handleMouseOver);
      button.addEventListener("mouseout", handleMouseOut);
      function handleMouseOver(event) {
        bgUp.visble = false;
        bgOver.visible = true;
        label.color = "white";
      }

      function handleMouseOut(event) {
        bgUp.visble = true;
        bgOver.visible = false;
        label.color = keyColor;
      }

      return button;
    }