詳解JavaScript Canvas編 (全21回)

#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)
- ファイルの作成
- 動作確認

ドットインストール - 3分動画でマスターできるプログラミング学習サービス

詳解JavaScript Canvas編

ギャラリー

このレッスンについて

このレッスンを共有する

サービスメニュー

ご利用にあたって

学習支援ツール

ソーシャルメディア

更新情報