-
#01 Canvasを学んでみよう (01:49) 無料公開中
- 概要
- ブラウザ実行環境の説明
-
#02 Canvas要素を配置しよう (02:53) 無料公開中
- canvas要素の配置
- CSSの設定
- draw()
-
#03 四角を描画してみよう (02:52) 無料公開中
- contextオブジェクトの取得
- fillRect()
- strokeRect()
-
#04 塗りと線のスタイルを変えてみよう (02:45) 無料公開中
- fillStyle
- strokeStyle
- lineWidth
- lineJoin
-
#05 複数の図形を描画してみよう (01:49) 無料公開中
- スタイルの再設定
- 描画順に関する注意
-
#06 線形グラデーションを設定しよう (02:48)
- createLinearGradient()
- addColorStop()
-
#07 円形グラデーションを設定しよう (02:24)
- createRadialGradient()
-
#08 影をつけてみよう (01:27)
- shadowOffsetX
- shadowOffsetY
- shadowBlur
- shadowColor
-
#09 線を描画してみよう (02:10)
- beginPath()
- moveTo()
- lineTo()
- closePath()
- stroke()
- fill()
-
#10 線のスタイルを設定しよう (02:40)
- setLineDash()
- lineCap
-
#11 円弧を描画してみよう (02:59)
- arc()
- ラジアンの表現
- 扇形の表現
-
#12 楕円を描画してみよう (01:52)
- ellipse()
- rect()
-
#13 テキストを描画してみよう (02:55)
- fillText()
- font
- textAlign
- textBaseline
- strokeText()
-
#14 画像を描画してみよう (02:56)
- drawImage()
- createPattern
-
#15 画像の一部を切り出してみよう (02:18)
- drawImage()
-
#16 キャラクターを描いてみよう (02:24)
- キャラクターの描画
- サイズを変更しての描画
-
#17 座標空間を変形させてみよう (02:37)
- scale()
- translate()
- rotate()
-
#18 描画設定を保存､復元してみよう (01:43)
- save()
- restore()
-
#19 アニメーションさせてみよう (02:22)
- 三角関数
- アニメーションの描画
- clearRect()
-
#20 高解像度ディスプレイに対応させよう (02:50)
- devicePixelRatio
- 描画領域の拡大
- 表示領域の縮小
-
#21 手元のファイルで実行してみよう (02:44)
- ファイルの作成
- 動作確認
ギャラリー
このレッスンについて
- 最終更新日
- 2019年7月4日
- バージョン情報
- JavaScript (ES2017) / ブラウザ実行環境 / Visual Studio Code 1.35
- 関連キーワード (4)
