『canvas』要素の勉強をする時の参考サイトまとめました

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

この記事を書いた人

著者 : ハヤシユタカ

2001年、有限会社ムーニーワークスを設立。WEB制作の他、書籍執筆、セミナー講演、企業研修などを行う。また、クリエイター育成機関デジタルハリウッドでは1999年より講師として本科WEBデザイナーコースやデジタルデザインコースを担当。 詳しいプロフィールはこちら

最近書いた記事

この記事に関連する記事