EaselJSは、著名なFlasherであるGrant Skinner氏が開発したCreateJSに含まれるHTML5 canvas用のJavaScriptライブラリです。CreateJSのサイトからダウンロードできます。EaselJSを使うことで、HTML5のcanvasをFlashに似た操作で扱うことができるようになります。

続きを読む

PreloadJSは、画像, 音声, CSS, JS, XMLといった外部ファイルを読み込むことができるJavaScriptライブラリです。CreateJSのサイトからダウンロードできます。これまで、JavaScriptで複数の外部ファイルを読み込む処理は比較的面倒でしたが、PreloadJSを使うと簡単に行えるだけでなく、読み込み状況のパーセンテージを取得することもできます。

続きを読む

これまでJavaScriptでのアニメーションには、setTimeout()やsetInterval()が使われてきましたが、これらのメソッドはアニメーション用に設計されたわけではないため、色々と問題がありました。現在、W3CのワーキングドラフトにrequestAnimationFrame()が挙がっており、一部のブラウザはベンダープレフィックス付きでサポートを始めています。requestAnimationFrame()を使うことで、処理の高速化や複数のアニメーションの同期といったメリットが期待できます。

続きを読む

HTML5 canvas APIには、変換マトリックスを操作するメソッドが用意されています。変換マトリックスを簡易的に操作するtranslate(), rotate(), scale()や変換マトリックスを直接操作するtransform(), setTransform()を通して、描画オブジェクトを変形させることができます。

続きを読む

HTML5のcanvas APIでは、いくつかのプロパティを設定するだけで、線・塗り・画像といった描画オブジェクトに対して、簡単にドロップシャドウ効果を適用することができます。

続きを読む

HTML5 canvas APIには、canvas上のピクセルを取得するgetImageData()、canvas上のピクセルを書き換えるputImageData()、ピクセルデータを生成するcreateImageData()が用意されており、簡単にcanvas上のピクセルにアクセスすることができます。

続きを読む

HTML5 canvas APIには、テキストを塗りで描画するfillText()や線で描画するstrokeText()といったメソッドが用意されており、テキストをパスオブジェクトと同様に扱うことができます。

続きを読む

HTML5のcanvas APIには、線形グラデーションを作成するcreateLinearGradient()、円形グラデーションを作成するcreateRadialGradient()が用意されており、これらのメソッドを利用することで簡単に線や塗りにグラデーションを使用することができます。

続きを読む

HTML5のcanvas APIには、drawImage()が用意されており、簡単にcanvasに画像を表示することができます。drawImage()には、HTMLImageElementだけでなく、HTMLCanvasElementやHTMLVideoElementを渡すこともできるため、うまく利用することで面白い表現ができそうです。また、CanvasPatternを作成することにより、CSSの背景画像のように画像を繰り返しパターンとして表示することもできます。

続きを読む

HTML5のcanvas APIには、直線や曲線、円弧を描画するためのメソッドが予め用意されています。これらのメソッドを利用することで、これまではプラグインなしでは実現が難しかった自由な形状のパスをHTMLだけで描画することができます。

続きを読む