サイトトップ
Director Flash 書籍 業務内容 プロフィール

HTML5テクニカルノート

EaselJSで図形を描く

ID: FN1202005 Technique: HTML5 and JavaScript

EaselJSは、HTML5のCanvasを使うためのJavaScriptライブラリです。Flashと同じように、Stageが頂点となる表示リストでオブジェクト(DisplayObject)を扱うため、とくにActionScriptに慣れたユーザーには使いやすく設計されています。本稿は、EaselJSライブラリによる簡単な図形の描き方をご紹介します。


01 EaselJSを使うには
まず、EaselJSのライブラリは、EaselJSのサイトからダウンロードします(図001)。開発者Grant Skinner氏のgithubのページが開きますので、ZIP圧縮されたライブラリを取得します。

図001■EaselJSサイトのDownloadリンク
図001

展開したライブラリ「easeljs」はJavaScript用の適切な場所に置きます。本稿では、HTMLドキュメントと同じ階層にします(図002)。

図002■ライブラリ「easeljs」を適切な場所に
図002

つぎに、EaselJSはCanvasを使いますので、そのためのコードを書きます。<canvas>要素と描画のためのJavaScriptを呼出す記述が少なくとも必要です。Canvasの基本について詳しくは、「<canvas>要素で定めた領域に図形を描く」をお読みください。

<head>
<script type="text/javascript">
  function xInitialize() {
    // ここに処理を記述
  }
</script>
</head>
<body onload="xInitialize()">
  <canvas id="myCanvas" width="240" height="180"></canvas>


02 まずはStageオブジェクトをつくる
前述のとおり、EaselJSは表示リストを用意してくれます。その頂点のStageオブジェクトをつくらなければなりません。Stageクラスのコンストラクタには、引数として<canvas>要素の参照を渡します。

new Stage(canvas要素)

そして、忘れずにEaselJSライブラリの必要なJavaScriptファイルを読込みます(前述のとおり、本稿ではeaseljsフォルダをHTMLドキュメントと同じ場所に置いています。)。まずはStageオブジェクトをつくるまでのスクリプトが、つぎのコード001です。alert()関数でStageオブジェクトができているかどうかを確かめています(図003)。

コード001■Stageオブジェクトをつくる
  1. <script src="easeljs/utils/UID.js"></script>
  2. <script src="easeljs/geom/Matrix2D.js"></script>
  3. <script src="easeljs/display/DisplayObject.js"></script>
  4. <script src="easeljs/display/Container.js"></script>
  5. <script src="easeljs/display/Stage.js"></script>
  6. <script type="text/javascript">
  7.   var stage;
  8.   function xInitialize() {
  9.     var canvasObject = document.getElementById("myCanvas");
  10.     stage = new Stage(canvasObject);
  11.     alert(stage);
  12.   }
  13. </script>

図003■alert()関数でStageオブジェクトの生成を確かめる
図003

読込むJavaScriptファイルには、Stageクラスが継承するクラス(DisplayObjectやContainer)の他、必要なことが一見しただけではわかりにくいものもあるので、注意しましょう。また、継承するクラスなど読込む順序が変わると、初期化できない場合もあります。


03 StageにShapeオブジェクトを置いて描画する
それではStageオブジェクトの表示リストに、描画のためのオブジェクトをひとつ加えましょう。Flashと同じShapeというオブジェクトがあり、描画用のメソッドが使えます。Shapeオブジェクトをつくって表示リストに加え、その座標を定めるスクリプトはつぎのとおりです(行番号は後掲コード002のもの)。

  1. var myShape = new Shape();
  1. stage.addChild(myShape);
  2. myShape.x = 50;
  3. myShape.y = 50;

描画に用いるのはGraphicsオブジェクトで、ShapeオブジェクトのShape.graphicsプロパティから参照が得られます。描画の色を決めるメソッドは、塗りがGraphics.beginFill()、線はGraphics.beginStroke()です。引数のカラーはHTMLと同じ文字列で渡します。円を描くのがGraphics.drawCircle()メソッドです。Canvasに描画するため、最後にStage.update()メソッドを呼出します。

  1. var myGraphics = myShape.graphics;
  1. myGraphics.beginStroke("#0000FF");
  2. myGraphics.beginFill("#00FFFF");
  3. myGraphics.drawCircle(0, 0, 40);
  4. stage.update();

これらの処理を関数(xDraw())にして加えたのが、つぎのコード002です(第15〜25行目)。読込むJavaScriptファイルが、さらにふたつ加わりました。Canvasには塗りがシアンで線は青い半径40ピクセルの円が描かれます(図004)。

コード002■EaselJSでCanvasに円を描く
  1. <script src="easeljs/utils/UID.js"></script>
  2. <script src="easeljs/geom/Matrix2D.js"></script>
  3. <script src="easeljs/display/DisplayObject.js"></script>
  4. <script src="easeljs/display/Container.js"></script>
  5. <script src="easeljs/display/Stage.js"></script>
  6. <script src="easeljs/display/Graphics.js"></script>
  7. <script src="easeljs/display/Shape.js"></script>
  8. <script type="text/javascript">
  9.   var stage;
  10.   function xInitialize() {
  11.     var canvasObject = document.getElementById("myCanvas");
  12.     stage = new Stage(canvasObject);
        // alert(stage.addChild);
  13.     xDraw();
  14.   }
  15.   function xDraw() {
  16.     var myShape = new Shape();
  17.     var myGraphics = myShape.graphics;
  18.     stage.addChild(myShape);
  19.     myShape.x = 50;
  20.     myShape.y = 50;
  21.     myGraphics.beginStroke("#0000FF");
  22.     myGraphics.beginFill("#00FFFF");
  23.     myGraphics.drawCircle(0, 0, 40);
  24.     stage.update();
  25.   }
  26. </script>

図004■塗りがシアンで線は青い半径40ピクセルの円が描かれる
図004


04 異なる記述方法
前掲コード002の円を描画する関数(xDraw())は、別の書き方もできます。ふたつ書替えをしましょう。第1に、Shape()コンストラクタは、引数にGraphicsオブジェクトが受取れます。ですから、新たにGraphicsオブジェクトをつくって、それをコンストラクタに渡すことにします。

第2は、Graphicsクラスの描画メソッドは、描画したGraphicsオブジェクトを返します。そのため、戻り値のオブジェクトに、さらに描画を加えることができるのです。これらふたつの書替えをした関数が、つぎのコード003です。

コード003■異なる記述による円を描く関数
  1. function xDraw() {
  2.   var myGraphics = new Graphics();
  3.   var myShape = new Shape(myGraphics);
  4.   myGraphics.beginStroke("#0000FF").beginFill("#00FFFF").drawCircle(0, 0, 40);
  5.   stage.addChild(myShape);
  6.   myShape.x = 50;
  7.   myShape.y = 50;
  8.   stage.update();
  9. }

05 EaselJSライブラリをまとめて読込む
EaselJSを使うとき、いちいちどのJavaScriptファイルが必要か確かめるのは面倒なので、まとめて読込んでしまいたいという人もいるでしょう。そういうときのために、EaselJSのクラスをひとつにまとめたJavaScriptファイルが提供されています。ダウンロードしたlibフォルダの中のeasel.jsというファイルです(図005)。

図005■libフォルダの中のeasel.jsファイル
図005

JavaScriptファイルはこのeasel.jsひとつを読込めば済み、読込みの順番を気にすることもありません。また、ファイルが速く読込めるように、コメントはもちろん要らない空白文字を除いてあります。その代わり、ファイルを開くととても見づらくなってしまっています。クラスを研究したり、手を加えたりしたいときは、それぞれのJavaScriptファイルを使うのがよいでしょう。

作成者: 野中文雄
作成日: 2012年2月15日
Copyright © 2001-2012 Fumio Nonaka.  All rights reserved.