WordPressアップデートによるテーマファイル構成の不具合により、現在は仮のテーマで表示しています。
記事など読みづらいところが多々あると思いますがご了承いただけると幸いです。
鋭意修正中です…

HTML5<canvas>チュートリアルサイト「HTML5 Canvas Tutorials」

HTML5での注目タグ<canvas>。
使いこなすには今までのHTMLとはちょっと違うSCRIPTと絡ませた記述が必要になります。

そんな<canvas>タグの使い方について、カテゴリに分けてチュートリアル形式で解説しているサイト
「HTML5 Canvas Tutorials」が、この先便利に使えそうだったのでメモ書き程度に紹介してみます。

HTML5 Canvas Tutorials

画面左側のメニューで
—————————————-
1. HTML5 Canvas
2. Lines
3. Curves
4. Paths
5. Shapes
6. Gradients
7. Images
8. Text
—————————————-
といった具合にカテゴリ分けされており、
それぞれカテゴリに沿った<canvas>タグの使い方を
確認することができます。

中ページではそれぞれのアクションを実装させる為のソースと
実際にブラウザ上で実行させたデモ画面を見ることができます。

例えば、、

HTML5 Canvas Image Crop Example

画像をトリミングするサンプル。(not <img>タグ)


HTML5 Canvas Image Crop

この先も随時更新されていきそうな感じのサイトなので
ちょくちょくチェックしておくと良さそうです。

そしておまけに…

HTML5でのサイト上で良く使われるであろうと思われるUI等をまとめたエントリー
「10 Cool and Useful HTML 5 Tutorials」も併せてメモ書き。

10 Cool and Useful HTML 5 Tutorials

HTML5でのレイアウトやドラッグ&ドロップ、スライドショーなどなど。
今後の参考になりそうです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です