JavaScriptEaselJSで外部から読込んだビットマップファイルをCanvasに表示し、さらにアニメーションで回してみます。EaselJSの基本的な使い方や必要な設定については、「EaselJSで図形を描く」をお読みください。円のShapeインスタンスをふたつつくるビットマップはPNGファイル(Pen.png)で用意しました。HTMLドキュメントと同じ場所に画像用のフォルダ(images)をつくり、その中に納めます(図001)。図001■PNGファイルを画像用フォルダに納めるHTMLドキュメントの<body>要素には<canvas>要素("myCanvas")が記述され、描画のためのJavaScriptの関数(xInitialize())を呼出しているものとします。EaselJSの基本的な設定については、前出「EaselJSで図形を描く」をお読みください。height="180"></canvas></body>EaselJSで外部ビットマップファイルを読込んで、Canvasに表示するのは簡単です。つぎの3つの手順を踏みます。EaselJSライブラリのBitmap.jsを読込むBitmapクラスのコンストラクタメソッドでインスタンスをつくるBitmapインスタンスをStageオブジェクトの子に加えるBitmapクラスのコンストラクタメソッドには、読込むビットマップファイルのURIを文字列で引数に渡します。Bitmap(読込むファイルのURI)以下のコード001をHTMLドキュメントの<script>要素として加えると、外部から読込まれたPNGファイルの画像が画面左上に表示されます(図002)。Bitmap("images/Pen.png");stage.addChild(myBitmap);stage.update();}</script>まず、EaselJSライブラリのBitmap.jsの読込みを<script>要素に加えます(コード001第6行目)。つぎに、Bitmapクラスのコンストラクタメソッドに読込むファイルのURIを渡して呼出します(第16行目)。でき上がったBitmapインスタンスを、Container.addChild()メソッドでStageオブジェクトの表示リストに加えました(第17行目)。インスタンスを回すアニメーションインスタンスを回すアニメーションについては、「EaselJSで描いた星形を回す」の02「EaselJSを使ったスクリプトによるアニメーション」でご説明しました。インスタンスがBitmapでも、とくに回し方そのものは変わりません。すると、前掲コード001につぎの記述を加えればよさそうです。5;stage.update();}</script>このコードを試すと、確かに画像の回るアニメーションになります。回転の中心が画像の左上角になってしまいます(図003)。インスタンスを中心から回すDisplayObjectクラスにはDisplayObject.regXとDisplayObject.regYというプロパティがあり、インスタンスの基準点を変えることができます。BitmapインスタンスのBitmap.imageプロパティから、読込んだ画像のImageオブジェクトが参照できます。これらのプロパティを使って、Bitmapインスタンスを中心から回すようにしたのがつぎのコード002です。5;stage.update();}</script>BitmapインスタンスをつくってCanvasに配置する関数(xDraw)に、xy座標とするふたつの引数が定められました(コード002第16行目)。初期設定の関数(xInitialize())から、Canvasの中心となるxy座標を渡して呼出します(第14行目)。Bitmapインスタンスをつくる関数(xDraw())では、読込んだ画像のImageオブジェクトをBitmap.imageプロパティで参照して、幅と高さの半分の値をそれぞれBitmapインスタンスのDisplayObject.regXとDisplayObject.regYプロパティに定めました(コード002第18〜19行目)。これで、Bitmapインスタンスの基準点は中央になります。そのうえで、関数の引数に受取ったCanvasの中心のxy座標をBitmapインスタンスに設定しました(第20〜21行目)。これでBitmapインスタンスはCanvasの中央に置かれ、アニメーションはその中心から回ります(図004)。