― HTML5 <canvas>作品集
※ ExplorerCanvasかuuCanvas(uupaa.js)を読み込んでいるので、
基本的にはクロスブラウザになっているはずですが、動作確認はFirefoxでしか行っておりません。
その為、他のブラウザでは意図しない動作をする可能性があります。
また、IEでは動いたとしても非常に重くなりますので注意して下さい。
（最悪の場合、ブラウザが落ちます！）
記念すべき、僕の初canvas作品です。
当時、HTMLでプレゼンツールを自作するのが流行っており、
他にはない機能と付けようとして、canvasによるお絵かきができるようにしました。
しかし、もう2年も前になるんですねぇ。あまり進歩していないのが悲しいですが…。
ちなみに、この頃はまだ、HTML5っていう冠はなかったです。（草案発表前）
ExplorerCanvasを使って、かなり苦労しながらIEでも動くようにした記憶があります。
なんと、1年も間が空いてますが…。
国産ライブラリuuCanvasを使用した、第一弾作品です。
グラデーションがちゃんと動くのが面白くて、とりあえずいっぱい描いてみました。
uupaa.jsには今もお世話になっています。
こちらもuuCanvasを使い始めたころの作品です。
当時、excanvasは円形グラデーションに対応してなかったんですが、
今はどうなんでしょうか…？
そして、また半年後。
ここから、HTML5のcanvasとして意識し始め、僕の中でcanvasブームが始まります。
この作品は、canvasでのゲーム制作方法を学ぼうと、Canvas Tutorialを見ながら自分で書いてみたものです。
オリジナリティーは一切ありません。むしろ劣化しています。
すっかり存在を忘れていて紹介していませんでした。
わりと気に入ってたんだけどなぁ・・・。
canvasで魔法陣を書く。ただそれだけですが、ブラウザ毎に挙動が微妙に違ったりして苦労させられました。
結局OperaとIEではうまく動かないままだったと思います。
テイルズ風（というか魔神英雄伝ワタル外伝風）の戦闘画面です。
結局、「canvasでゲームを作ろう」企画は断念しましたが、
canvasだけでここまでできるというサンプルになれば良いかな、と思います。
canvasならCAPTCHAが簡単に作れるんじゃないか、という思いつきで作ったものです。
本当に思いつきだけなので、実用性はたぶんありません。
これも「canvasでゲームを作ろう」と意気込んでいた時に作ったものです。
上の戦闘シーンと合わせればゲームができるかもしれませんね…。
canvasのclipという機能を使った作品です。（この時初めて知ったんです。）
MDCのA canvas clip exampleというサンプルを改変して、回転するようにしただけです。
僕のように知らないメソッドがあると、遠回りすることになるので、canvasプログラミングをする前に、一度はリファレンスに目を通しておいた方が良いでしょう。
なお、この作品からjQueryの使わず、pure uupaa.js(0.7α)で作ってます。
これも、MDCのサンプルを改造したものです。
マウスの動きに合わせて、clip領域が移動します。
また、クリックで拡大、右クリックで縮小もできます。
このインタフェース（？）は次の作品にも使用されています。
裸に見える画像ジェネレーター Wormyに影響されて作ったものです。
オリジナルのように自動描画する機能はありませんが、
同様の画像を手動で頑張って作れます。
こういう特化型エディタを作るのにcanvasは非常に便利だと思います。
（レイヤーがないのが痛いですが…）
良い子は見ちゃダメ＞＜
お気づきかもしれませんが、このページのロゴとフッターもcanvasを使用して描画されています。
ロゴの映り込みは、株式会社あゆたさんのサンプルをほぼそのまま利用させていただいております。
また、フッター部の棒人間は、Fastladderのものを利用しています。
canvasのdrawImageに動画やアニメーションgifを指定すると、その瞬間のデータを取得できるので、このような描画が可能になります。（Firefoxのみ対応。）
またも思いつきで作ってみました。
マウスカーソル周辺の画像を、拡大して表示します。
bookmarkletとかにすれば、実用できるかもしれません。
（vectorデータじゃないので荒くなってしまいますが…）
画像は、saori andoさんがhtml5jに投稿されたものをお借りしています。