SimpleBoxes

[JavaScript]canvas 要素で遊ぶ

Safari、Firefox、Opera でサポートされている canvas 要素について調べています。次のイメージはクリックすると、回転します。

再度クリックで回転が止まります。回っている画像を見続けると酔うので、注意してください。

Internet Explorer では、記事の個別表示でしかうまく動作しないようです。もし以下にうまく画像が表示されない場合は、個別に記事を表示してみてください

[写真]MacBook キーボード

Internet Explorer でも Google が作成した ExplorerCanvas というライブラリを使用すると、canvas 要素が利用できるようです。

上記のように、canvas に描画された内容は回転させることができます。

単純に回転させるだけだと、残像が残ってしまうので、clearRect という関数を使って、残像を消す処理を行っています。

canvas については、HTML5.JP さんの Canvas - HTML5.JP でかなり丁寧に説明されています。サンプルも沢山あってとても参考になります。

スポンサーリンク

<< [JavaScript]イメージリスト(仮)の動作実験 :: [JavaScript]「canvas 要素で遊ぶ」サンプルコードの簡単な解説 >>