APIの主要な描画機能はほぼ解説したので、ここからはアニメーションの実現方法や描画以外の機能に注目していきます。APIならではの機能といえるでしょう。APIには、それ自体にアニメーションを制御する機能はありません。わずかに変化した画像をプログラムで繰り返し描画してアニメーションを実現します。JavaScriptでこうした処理を行う場合、従来はsetInterval()で定期的に描画関数を呼び出すのが通例でした。この方法では非表示の状態(ウィンドウが最小化されている、別のタブがアクティブになっているなど)でも常に描画負荷がかかります。そこで、この問題を回避するために各ブラウザで実装が進んでいるのが、requestAnimationFrame()です。このメソッドで描画処理を呼び出せば、CSSやSVGと同等の滑らかなアニメーションを実現しつつ、非表示状態の描画負荷を抑えることが可能になります。API専用の機能ではなく、DOMのアニメーションでも利用できます。使用方法を以下に示します。requestAnimationFrame(tick);}requestAnimationFrame(tick);requestAnimationFrame()の動作は、引数として渡したコールバック関数を次回の更新タイミングで「一回だけ」呼び出すというものです。繰り返し処理するためにはコールバック関数の最後で毎回requestAnimationFrame()を呼び出し、コールバック関数を登録する必要があります。従って、アニメーションが終了した際はrequestAnimationFrame()をスキップするだけで次回からコールバック関数は呼ばれなくなります。残念ながらrequestAnimationFrame()はまだ標準化されておらず、すべてのブラウザが実装しているわけではありません。実装している場合でも関数名にはベンダープレフィックスが付いています。実際に使用する際は以下のラッパー関数を使うとよいでしょう。APIで画像を回転するアニメーション実装した例を以下に示します。実際のサンプルを見る呼び出しごとに一定の角度だけ回転させるのではなく、実時間を使って回転角を算出している点に注意してください。requestAnimationFrame()は呼び出し間隔を指定できないので、間隔によらず一定の速度でアニメーションするように工夫する必要があります。APIを利用してUIを描画する場合、特定の図形がクリックされたかどうかを判別する必要があります。そのために用意されているのが、isPointInPath()です。引数として渡された座標が現在のパスの内部にあればtrueを、そうでなければfalseを返します。isPointInPath()メソッドこのメソッドを使用して、パスがクリックされた際にalertを表示する例を以下に示します。isPointInPath()に渡す座標はcanvasタグ内のローカル座標になるため、クリックイベントで渡されたクリック位置を変換する必要がある点に注意してください。APIで描画した画像は、PNGなどの形式でエクスポートできます。これを実現するのがtoDataURL()メソッドです(描画コンテキストではなく、canvasのDOMオブジェクトのメソッドです)。toDataURL()メソッド引数は出力形式を指定するMIMEタイプです。PNG形式(image/png)は必ずサポートすることになっていますが、JPEGなどサポートはブラウザ依存となっています。返り値は文字列で、data:スキームのURLとなっています。引数で指定した形式がサポートされていない場合、出力はPNG形式になります。正規表現にマッチするかどうかで、(PNG以外の)指定した画像形式がサポートされているかどうかを判別できます。以下は、canvasタグの描画内容をimgタグで表示する例です。左がcanvasタグ、右がimgタグとなっています。imgタグ側を右クリックすると、画像の保存などのあるimgタグ特有のコンテキストメニューが開くことが確認できるはずです。実際のサンプルを見るなお、セキュリティ上の理由から、別ドメインの画像を描画したcanvasタグに対してtoDataURL()メソッドを呼び出すと例外が発生します。画像のエクスポートが必要なときは、別ドメインの画像を描画しないように注意してください。ビットマップの操作PNGなどの形式ではなく、素のビットマップに直接アクセスすることも可能です。それを実現するメソッドを以下に示します(描画コンテキストのメソッドです)。ビットマップにアクセスするメソッドcreateImageData()は、空の、もしくは指定したImageDataオブジェクトをコピーしたImageDataオブジェクトを生成します。getImageData()は描画領域内の指定範囲のビットマップをコピーしたImageDataオブジェクトを生成します。このメソッドは、toDataURL()と同様に別ドメインの画像を描画したcanvasタグに対しては呼び出せません。putImageData()は逆に、指定したImageDataオブジェクトの内容を描画領域にコピーします。省略可能な4つの引数を指定すると、その範囲のみがコピーされます。省略時はImageDataオブジェクト全体がコピーされます。dataの3つの属性があります。heightはビットマップの縦横のサイズを示します。dataはビットマップを格納した要素数width×height×4の配列です。APIで描画した内容をJavaScriptで自由に加工できます。APIにはSVGのようなフィルタの機能はありませんが、JavaScriptで実装さえすれば、あらゆるフィルタが実現可能です。以下は画像を描画し、そのRチャンネルとBチャンネルを入れ替える例です。メールマガジンをご購読ください。申し込みページへITmediaはアイティメディア株式会社の登録商標です。