徐々に動きを見せつつある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なら誰でも簡単に、という風にはいかない感じもしますが
今後おもしろいことができそうな気もします。。

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

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

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (1)

  • Sharyl Bausley | 2010.11.09 11:45

    I found your blog on google. I think it’s pretty good.







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

HTML5の<canvas>タグについてもろもろ。

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR