まずは基本から・HTML5のCanvasについて参考になったサイトまとめ

Ads

ようやくHTML5に興味を持ち始めました。
サンプルを以前記事にして、凄いなーと
思っていましたが、なかなか時間がなく、
先延ばしに。で、ようやく頭に入れ始めま
した。なにするにも行動が遅くて困ります。

HTML5でも話題になっているCanvasを勉強し始めました。そんな中で、勉強の参考になりそうなサイトをブクマしたのでこれから学ぼう、とお考えの方とシェアしたいと思ってエントリー。

というわけで、基本的な情報がほとんどです。大量の情報を見ても混乱するのである程度絞っています。

html5.jp

html5-01

リファレンスサイトです。リンク先はcanvasカテゴリに。ここからスタート、というか最後までたぶんお世話になりそう。

html5.jp

~HTML 5で導入されるcanvas要素の使い方~

html5-02

同じく教科書的なサイト。ありがたい。まだ、ざっと読んだだけですが、すごく分かりやすかったです。

~HTML 5で導入されるcanvas要素の使い方~

HTML5事始め(2) ~Canvas~

html5-03

簡単なサンプルです。まずはhello world的なものからやってみたいですね。コードが書いてあるので参考に。

HTML5事始め(2) ~Canvas~

HTML5先取り!CanvasならFlash不要で絵が描ける

html5-04

こちらもサンプルコードがあります。IEへの対応のさせ方も掲載されてますよ。

HTML5先取り!CanvasならFlash不要で絵が描ける

そろそろ、HTML5

html5-05

こちらもリファレンスサイトのコラム的なページで簡単なサンプルがあります。とにかく真似してみよう、という僕にはありがたい。

そろそろ、HTML5

HTML5 Canvasのサンプル

html5-06

ここ、凄いですよ。沢山のサンプルをDL出来ます。もっと評価されて欲しい。超オススメです。

HTML5 Canvasのサンプル

デザイナーのためのHTML5リソースまとめ

html5-07

海外の情報のまとめエントリーです。いろいろ試したら次のステップとして参考にしたい。チートシートなんかもあります。

デザイナーのためのHTML5リソースまとめ

HTML5 Canvas Cheat Sheet

html5-08

さっきのまとめ記事にあるチートシートもいいのですが、こっちもよさ気ですよ。英語ですが少し触ればだいたい分かるっぽい。

HTML5 Canvas Cheat Sheet

そのほかの情報

そのほかの情報です。備忘録的に。

  1. JavaScriptで図形を描くHTML要素「Canvas」の実例
  2. 古い記事(2007年)ですが、既にGIGAZINEが話題に取り上げていました。凄いなぁ。

  3. アドビ、FlashをHTML5のCanvasへ変換するプロトタイプ機能を明らかに。アニメーションも変換
  4. FlashとHTML5はよく対立的に扱われますが、共存できそうな期待の出来るエントリーがこちら。

  5. 動画:FlashをHTML5に自動変換するSmokescreen、iPadでも動作
  6. これは結構感動モノでした。(大袈裟かもだけど・・)Flashの方が作るのに時間的コストが掛からないならこういう手も。

  7. スライドや動画など、HTML5のサンプルいくつか
  8. 手前味噌。全てがCanvasではないですのでご注意を。

以上、HTML5のCanvasをこれから学ぼう、と言う方によさ気なサイトいろいろでした。まったり学んでいこうと思います。