HTML5の『canvas』要素

今回の標題でもあるcanvas要素は、HTML5の新要素の中で最も注目されている要素の1つなので、私もこれから学習していくのがとても楽しみです。

まずcanvas要素について知るために参考サイトを見つけることから始めました。調べるとすぐにサンプルなどが数多くヒットし、その中には目を奪われる表現や複雑な処理を行っているモノがいくつもありました。また、サンプルは非常に多いのですがちゃんとしたサイトでの事例はまだまだ少ないのが現状だということも知ることができました。まずは焦らず基礎から勉強していこうと思います。

『canvas』要素のサンプルまとめ

今回調べた『canvas』要素を使ったコンテンツをいくつかピックアップしましたのでご紹介します。

HTML5 Canvas and Audio Experiment

音楽に合わせて複数のオブジェクトが円になったり、マウスアクションに反応します。
http://9elements.com/io/projects/html5/canvas/

Canvascape – “3D Walker”

3D空間を移動します。もっとも有名なサンプルコンテンツの1つではないでしょうか。
http://www.benjoffe.com/code/demos/canvascape/

modern carpentry rides the html5 canvas wave

ウェーブする波線をスライダーで変化させることができます。
http://modern-carpentry.com/workshop/html5/waveform/

canvasdemos -Top100 Canvas Demos-

canvasdemosサイトでcanvas要素を使った人気デモのランキング100が見れます。
http://www.canvasdemos.com/top-100/

20 Shockingly Cool HTML5 Canvas Applications

canvas要素を使ったクオリィティの高い20のアプリケーションを紹介しています。
http://creativefan.com/20-shockingly-cool-html5-canvas-applications/

Top 25 Best HTML5 Canvas Games You Love To Play

canvas要素を使ったゲームを25個紹介しています。マリオカート久しぶりにやりました。
http://technotab.com/top-25-best-html5-canvas-games-you-love-to-play/

後半の3っつはまとめ系のサイトでしたが見ていて飽きないですね。今後、一覧で見れるサイトを見つけたらここに随時追加していく予定です。

『canvas』要素の学習用サイト

『canvas』要素のチュートリアルや、サンプルソースを載せてくれているサイトをまとめました。

Canvas – HTML5.JP

毎回参考にさせていただいていますHTML5.JPさんのCanvas解説ページ。
http://www.html5.jp/canvas/

まだまだ間に合うCanvasでアニメーション入門（まとめと実践）

canvasでのアニメーションについて基本から応用までしっかりまとめられています。
http://5509.me/log/animation-with-canvas/

Canvasのブラウザによって異なる微妙な振る舞いについてまとめてみた。

canvas要素にオブジェクトを描画した時にブラウザごとにどう違うかを検証してくれています。
http://d.hatena.ne.jp/mindcat/20100815/1281877127

HTML5 Canvas Cheat Sheet

canvas要素のCheat Sheetです。いちおコピーしておきます。
http://simon.html5.org/dump/html5-canvas-cheat-sheet.html

JS + Canvas = 3D しました

canvas要素を使って3D表現を行う方法を解説してくれています。
http://blog.wonder-boys.net/?p=436

HTML5CanvasTutorials

canvas要素を使ったサンプルソースが複数載ってます。コードも凄く見やすいのである程度理解してきたらとても参考になりそうです。
http://www.html5canvastutorials.com/

HTML5 の Canvas を使って素晴らしいグラフィックスを作成する

canvas要素の基礎が分かりやすく解説されています。
http://www.ibm.com/developerworks/jp/web/library/wa-html5canvas/?cmp=dw&cpb=dwwdv&ct=dwrss&cr=dwrss&ccy=jp&csr=031111

ゲーム製作でHTML5-Canvasを勉強するぞ！！の最近のブログ記事

ゲームを1から作る手順が書いてありました。
http://murakya.net/blog/javascript/html5-canvas/

今更聞けないcanvasの基礎の基礎

canvas要素の基本的なメソッドやプロパティを順に解説してくれています。
http://tech.kayac.com/archive/canvas-tutorial.html

『canvas』要素に関連するJS

canvas要素を扱いやすくしたり、3D表現ができるようにできる今後試してみたいJSを紹介します。

three.js

3D表現を行うときに使うライブラリです。3D表現ができるライブラリはいくつかあるようですが、その中で最も有名なものの1つみたいです。
https://github.com/mrdoob/three.js/

gury.min.js

コリスさんの記事『[JS]HTML5/Canvasを手軽に扱えるようになる実用的なスクリプト -gury』で紹介されていました。guryを使うとcanvas要素を簡単に実装させることができるようです。
http://guryjs.org/

今後、HTML5のcanvas要素について何回かに分けて学習していきたいと思います。まずは本当に基礎から勉強していきますので、これから始めようと思っている方はぜひ一緒にやりましょう。