【旧版】HTML5 Canvas入門
(全17回)
最新版のレッスンはこちらから »
【最新版】HTML5 Canvas入門 (全33回)
JavaScriptと組み合わせることで、画像を描画することができるHTML5のcanvas要素について学びます。
このレッスンでは HTML5 を使用しています。
-
#01 HTML5 Canvasとは何か？ (01:30) 無料公開中
- Canvasの概要
- 必要となる知識
- 必要となるツール
-
#02 ひな形ファイルを作ろう (02:29) 無料公開中
- HTMLの作成
- canvasタグについて
- myscript.jsの作成
-
#03 はじめての図形描画 (02:16) 無料公開中
- canvas要素の取得
- エラー処理
- コンテクストの取得
- 図形描画
-
#04 四角形を描いてみよう (02:41) 無料公開中
- strokeRect
- fillRect
- clearRect
-
#05 線や塗りのスタイルを変えてみよう (02:41)
- 線の色
- 塗りの色
- 線の太さ
- 角の設定
-
#06 グラデーションを設定してみよう (02:43)
- 線形グラデーションの設定
- 円形グラデーションの設定
-
#07 影と透明度の設定をしてみよう (02:05)
- 影の設定
- 透明度の設定
-
#08 図形を変形させてみよう (02:09)
- 図形の縮小・拡大
- 図形の回転
- 図形の移動
-
#09 線を描いてみよう (02:40)
- beginPath()
- moveTo()
- lineTo()
- stroke()
- closePath()
- fill()
-
#10 曲線を描いてみよう (02:57)
- arc()
- lineCap()
-
#11 テキストを描画してみよう (02:48)
- テキストのスタイルの設定
- fillText()
- strokeText()
-
#12 画像を表示してみよう (01:36)
- 画像の表示
-
#13 画像で背景パターンを作ってみよう (01:51)
- 背景パターンの作成
-
#14 設定を保存、復元してみよう (02:19)
- 設定の保存
- 設定の復元
-
#15 素敵な画像を作ってみよう (1) (02:41)
- ループによる画像の作成
-
#16 素敵な画像を作ってみよう (2) (01:58)
- ロジックの完成
- 動作確認
-
#17 アニメーションを作ってみよう (02:38)
- アニメーションの作成
このレッスンに関する参考リンクを紹介しておきます。
-
『canvas』要素の勉強をする時の参考サイトまとめました | HTML5でサイトをつくろう
canvasのデモや参考サイトがまとまっています。
-
[HTML5 canvas] 簡単な 3D アニメーション - 1ka2ka.com
canvasで綺麗なアニメーションを実現しています。
-
Canvasで実現するカラフルな円が小さくなったり大きくなったりする背景 | Web Mugen
Canvasでアニメーションする背景をつくるためのチュートリアルです。
-
HTML5 Canvas and Audio Experiment
Canvasの素敵なデモサイトです。音がなります。
-
今更聞けないcanvasの基礎の基礎 | tech.kayac.com - KAYAC engineers' blog
canvasの基礎が簡単にまとめられています。
-
Canvas - HTML5.JP
Canvasについて詳細かつ網羅的にまとめられています。
-
Canvasリファレンス
canvasの各APIがサンプルコード付きでまとめられています。
