CreateJSを使って動きのあるWEBページを作りたい! ~図形の描画~


最近のWEBページってたくさん動きますよね!
イケてるサイトとか見ると自分もそんなサイトを作ってみたい…
そんなことを思う今日この頃です( ̄∇ ̄*)
そこで今回は、ローディング画面のようなちょっとした動きを手軽に作れるCreateJSを学んでいきます。

CreateJSを使って動きのあるWEBページを作りたい! ~図形の描画~
CreateJSを使って動きのあるWEBページを作りたい! ~クリック処理~
CreateJSを使って動きのあるWEBページを作りたい! ~Tickerで動かす~
CreateJSを使って動きのあるWEBページを作りたい! ~Containerでまとめる~

CreateJSとは

そもそもCreateJSって何?どんなことができるの?
まずはそこを紹介していきます。

CreateJSとは

HTML5でリッチな表現を実現するためのJavaScriptのライブラリ群になります。
そのため、JavaScriptが書けない!という人はまずJavaScriptを勉強しましょう。
リッチな表現については後述するCreateJSのデモを見ていただければイメージがつきやすいです。

【公式ページ】
http://www.createjs.com/

CreateJSでできること

CreateJSでできることとして、CreateJSの公式ホームページにデモがあるのでいくつか紹介します。

【ドラッグ&ドロップでオブジェクトが移動する】
http://www.createjs.com/demos/easeljs/draganddrop

【ゲーム】
http://www.createjs.com/demos/easeljs/game

【モザイクを消す】
http://www.createjs.com/demos/easeljs/alphamaskreveal

そのほかにも気泡のようなヘッダーを作成したりなど動画のような表現が可能になります。
こういった表現ができるとホームページのちょっとした箇所に動きを与えることができ、いい感じのホームページへ近づくのではないでしょうか。

CreateJSを使い方

さっそく使ってみましょう!
今回は簡単な図形をキャンバス上に表示していきます。

CreateJSの読み込み

CreateJSは、JavaScriptのライブラリなのでjQuery等のようにHTMLで以下の文で読み込んで使用します。

<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>

canvasの準備

CreateJSはcanvasを使用して図形等の描画をしていきます。
HTMLの図形を出したい位置にcanvasを準備します。
今回は、600×600の大きさで準備しました。

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>

</head>
<body>
 <canvas id="canvas" width="600" height="600"></canvas>
</body>
</html>

CreateJSで図形を描画

CreateJSで図形を描画していきましょう!
CreateJSの基本的な流れは以下の感じになります。

  1. キャンバスからCreateJSのステージを作成
  2. シェイプ(図形)を定義
  3. ステージへシェイプを追加
  4. 描画

一つずつ実装方法を見ていきます。

1. キャンバスからCreateJSのステージを作成

キャンバスにつけたidを使用してcreatejsのメソッドから生成をします。

new createjs.Stage(キャンバスのid);

後々使用するので変数に入れておきましょう。

2. シェイプ(図形)を定義

シェイプの生成は以下の文を使用します。

new createjs.Shape();

生成したシェイプに描画内容(円等の形や色など)を指定していきます。
今回は円を作成するので以下の文を使います。

シェイプ.graphics.drawCircle(x位置, y位置, 半径);

3. ステージへシェイプを追加

1で作ったステージに2で作ったシェイプを以下の文で追加します。

ステージ.addChild(シェイプ);

4. 描画

最後にステージのアップデートをします。
これにより再描画され変更が反映されます。

“ステージ”.update();

実際のコード

上記の構文を使用し、実際に出来上がった全体のコードは以下のようになります。

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
 <script>
 window.onload = function () {

 // キャンバスからCreateJSのステージを作成
 var stage = new createjs.Stage("canvas");

 // シェイプ(図形)を定義
 var shape = new createjs.Shape(); // シェイプを新規作成
 shape.graphics.beginStroke("Red"); // 線の色
 shape.graphics.beginFill("Yellow"); // 塗りつぶし色
 shape.graphics.drawCircle(100, 100, 50); // 円をX位置, Y位置, 半径で作成

 // ステージへシェイプを追加
 stage.addChild(shape); // シェイプをステージに追加

 // 描画
 stage.update();

 };
 </script>
</head>
<body>
 <canvas id="canvas" width="600" height="600"></canvas>
</body>
</html>

シェイプに色を付けたり多少の加工をしていますが流れはステージの作成⇒シェイプの定義⇒追加⇒描画です。

実行結果

ブラウザでHTMLを見てみると以下のように円ができています。

%e5%86%86%e6%8f%8f%e7%94%bb%e7%b5%90%e6%9e%9c

丸と四角で顔を描画してみる

練習としてもう少し複雑な図形?をリファレンス等を見ながら作ってみましょう。
下記のような顔を作ります。

%e9%a1%94%e6%8f%8f%e7%94%bb%e7%b5%90%e6%9e%9c

以下、コードの実装例です。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
  <script>
    window.onload = function () {
      var lineSize = 1;
    
      var faceSize = 50;
      var faceX = 100;
      var faceY = 100;

      var eyeSize = 6;
      var eyeY = faceY - (faceSize / 4);
      var leftEyeX = faceX + (faceSize / 4);
      var rightEyeX = faceX - (faceSize / 4);
    
      var mouthSizeX = 30;
      var mouthSizeY = 10;
      var mouthY = faceY + (faceSize / 4);
      var mouthX = faceX - (mouthSizeX / 2);
    
      // createJSのステージを作成
      var stage = new createjs.Stage("canvas");

      // 顔を定義
      var face = new createjs.Shape();                             // シェイプを新規作成
      face.graphics.beginStroke("Black");                          // 線の色
      face.graphics.setStrokeStyle(lineSize);                      // 線の太さ
      face.graphics.beginFill("Yellow");                           // 塗りつぶし色
      face.graphics.drawCircle(faceX, faceY, faceSize);            // 円をX位置, Y位置, 大きさで作成
      stage.addChild(face);                                        // 顔をステージに追加

      // 左目を定義
      var leftEye = new createjs.Shape();                          // シェイプを新規作成
      leftEye.graphics.beginStroke("Black");                       // 線の色
      leftEye.graphics.setStrokeStyle(lineSize);                   // 線の太さ
      leftEye.graphics.beginFill("White");                         // 塗りつぶし色
      leftEye.graphics.drawCircle(leftEyeX, eyeY, eyeSize);        // 円をX位置, Y位置, 大きさで作成
      stage.addChild(leftEye);                                     // 左目をステージに追加

      // 右目を定義
      var rightEye = new createjs.Shape();                         // シェイプを新規作成
      rightEye.graphics.beginStroke("Black");                      // 線の色
      rightEye.graphics.setStrokeStyle(1);                         // 線の太さ
      rightEye.graphics.beginFill("White");                        // 塗りつぶし色
      rightEye.graphics.drawCircle(rightEyeX, eyeY, eyeSize);      // 円をX位置, Y位置, 大きさで作成
      stage.addChild(rightEye);                                    // 右目をステージに追加

      // 口を定義
      var mouth = new createjs.Shape();                            // シェイプを新規作成
      mouth.graphics.beginStroke("Black");                         // 線の色
      mouth.graphics.setStrokeStyle(1);                            // 線の太さ
      mouth.graphics.beginFill("Red");                             // 塗りつぶし色
      mouth.graphics.rect(mouthX, mouthY, mouthSizeX, mouthSizeY); // 円をX位置, Y位置, 大きさで作成
      stage.addChild(mouth);                                       // 口をステージに追加

      // 描画
      stage.update();

    };
  </script>
</head>
<body>
  <canvas id="canvas" width="600" height="600"></canvas>
</body>
</html>

次回の予定

次回は今回作った顔にクリックイベントを付与し、少し動かしていきます。

  • このエントリーをはてなブックマークに追加

PAGE TOP