徐々に動きを見せつつあるHTML5。
HTML5では動画や音声の再生が可能になる<video>タグや<audio>タグの他に、
ソース(JavaScript)から図を描いたりアニメーション設定が可能になる<canvas>タグも注目されているものの一つ。

そろそろ少しはちゃんと知っておかないといけないかなと思って調べてみた<canvas>タグについて、
参考になりそうなサイトをいくつか紹介してみます。

HTML5.jp

有名サイトですが、HTML5について流れに沿ったわかり易い説明がされています。
<canvas>タグについては専用コンテンツを設け、解説してあります。

Canvas – HTML5.JP

HTML5 Canvasのサンプル – gorogoronyan

サンプルファイルがたくさん配布しているのでソースの参考になります。

HTML5 Canvasのサンプル – gorogoronyan

HTML5サンプル集 – 株式会社あゆた

ここもサンプルファイルがたくさん配布してあります。

HTML5サンプル集 – 株式会社あゆた

HTML5 Canvas Cheat Sheet – Nihilogic

HTML5<canvas>タグ用のチートシート。英語ですが見ればなんとなくわかるはず。

HTML5 Canvas Cheat Sheet – Nihilogic

これらの参考サイトを元(真似)にして、<canvas>サンプルを作ってみました。

SAMPLE

※HTML5対応ブラウザで動作します。

画面上にマウスドラックで線を引くことができます。
画面下にある「線の太さ」入力フォームに半角英数で数字を入れることで線の太さが変更できます。

「透明度」はSafariやChromeではスライドバーとなり、
ポイントを動かすことで<canvas>エリアの透明度を変更可能。(←これを変更すると画面上に引いた線は消えます。)
Firefoxでは入力フォームとなるので「0~1」の値(小数点の可)を入力してください。

<canvas>タグに何か動作を加えるには基本的にはJacaScriptの知識が必要になるので
HTML5なら誰でも簡単に、という風にはいかない感じもしますが
今後おもしろいことができそうな気もします。。

もっといろいろ試してみないと。

サンプルファイルをダウンロードしたい方はこちらから