新しいレッスンがあります
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
-
#01 Canvasを使ってみよう (02:42) 無料公開中
- 概要
- 完成版の確認
- 必要となる知識
- 対応ブラウザ
- 作業用フォルダの説明
- index.htmlの作成
-
#02 JavaScriptを書く準備をしよう (02:49) 無料公開中
- main.jsの作成
-
#03 stage要素を取得しよう (02:19) 無料公開中
- contextオブジェクトの取得
-
#04 矩形を描画してみよう (02:25) 無料公開中
- strokeRect
- fillRect
- clearRect
-
#05 高解像度のディスプレイに対応しよう (02:58) 無料公開中
- 高解像度ディスプレイへの対応
- devicePixelRatio の取得
-
#06 塗りと線を設定しよう (01:53)
- 線の色
- 塗りの色
- 線の太さ
-
#07 アニメーションさせてみよう (02:31)
- アニメーションの設定
-
#08 オブジェクトにまとめよう (02:32)
- Appオブジェクトの作成
-
#09 車をオブジェクト化しておこう (02:12)
- Carオブジェクトの作成
-
#10 車を描画してみよう (02:49)
- Carの描画
-
#11 地面を作ってみよう (01:48)
- Groundオブジェクトの作成
-
#12 山をオブジェクト化しておこう (01:34)
- Mountainオブジェクトの作成
-
#13 パスを使って山を描こう (02:41)
- beginPath()
- moveTo()
- lineTo()
- fill()
-
#14 もっとパスを使ってみよう (01:14)
- stroke()
- closePath()
-
#15 円弧を描いてみよう (02:07)
- 円弧の描画
-
#16 太陽を描いてみよう (02:33)
- 円の描画
-
#17 円形グラデーションをかけてみよう (02:26)
- 円形グラデーション
-
#18 線形グラデーションをかけてみよう (02:09)
- 線形グラデーション
-
#19 タイヤを描いてみよう (02:29)
- タイヤの描画
-
#20 save()､restore()を使ってみよう (02:03)
- save()
- restore()
-
#21 座標空間を意識してみよう (02:13)
- Gridオブジェクトの作成
-
#22 座標空間にグリッド線をひいてみよう (02:25)
- Gridの描画
-
#23 座標空間を変形させてみよう (02:34)
- translate()
- scale()
- rotate()
-
#24 タイヤを作り込んでいこう (02:25)
- 座標空間の拡大
-
#25 タイヤを回転させてみよう (01:42)
- 回転アニメーション
-
#26 テキストを扱ってみよう (02:25)
- テキストの描画
-
#27 テキストの位置をあわせよう (02:53)
- テキストの配置
-
#28 イベントの設定をしてみよう (01:48)
- クリックイベントの設定
-
#29 画像を扱ってみよう (02:41)
- 画像ファイルの読み込み
- 背景パターンの作成
-
#30 コードをきれいにしていこう (02:30)
- 不要なコードの削除
-
#31 変数の有効範囲を狭くしよう (02:18)
- 変数の有効範囲を狭める
-
#32 長過ぎるメソッドを整理しよう (02:44)
- Carオブジェクトの整理
-
#33 アプリを完成させよう (02:18)
- クリックイベント
- 画像読み込み
