タグ:canvas

requestAnimationFrameによるHTML5 canvasのアニメーション

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

HTML5 canvasのピクセル操作

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

HTML5 canvasでグラデーションを描画する

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

HTML5 canvasに画像を表示する

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

HTML5のcanvasに直線や曲線でパスを描画する

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

HTML5のcanvasに線や塗りで図形を描画する

HTML5のcanvasには、図形を線や塗りで描画するためのメソッドが予め用意されています。これらのメソッドを利用することで、これまではFlashのようなプラグインに頼らなければ実現が難しかった図形によるグラフの描画などもHTMLだけで実現することができます。

HTML5 canvas要素の基本的な使い方

HTML5で新たに追加されたcanvas要素を使うと、プラグインに頼ることなくアニメーションなどを描画することができます。旧バージョンのブラウザでは対応していないものもあるため、まだまだ使う場面は限られると思いますが、将来的には強力な表現方法の一つになることは間違いないでしょう。

3 / 3123