ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
プレミアム会員
法人でのご利用
レッスン一覧
プレミアム会員
法人でのご利用
ログイン
運営からのお知らせ
2021/02/19
NEW
今週は『PHPでTodo管理アプリを作ろう 非同期通信編』をリリースしました。
2021/02/03
NEW
ブラウザだけで学べる『マークダウン記法入門』をリリースしました。
PREMIUM
詳解JavaScript Canvas編
JavaScriptで図形を描画することができるCanvasについて学んでいきます。
0%
動画レッスン一覧
(21)
質問と回答
(12)
未完了
#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)
ファイルの作成
動作確認
#02 Canvas要素を配置しよう
なぜブロックで囲むと良いのですか?
2020年9月25日
#06 線形グラデーションを設定しよう
ctx.fillStyle = gの意味がわかりません
2020年5月17日
#07 円形グラデーションを設定しよう
createRadialGradientの中心がなぜ「2」になるのですか?
2020年5月17日
#08 影をつけてみよう
shadowColorの設定をあとにすると影が描画されないのはなぜですか?
2020年8月13日
#09 線を描画してみよう
ctx.closePath();の指定は任意ですか?
2020年8月13日
#14 画像を描画してみよう
addEventListenerを使う理由がわかりません
2020年10月30日
#19 アニメーションさせてみよう
clearRect()を使わないといけない理由がわかりません
2020年8月13日
Math.sin()に入れている数値の意味がわかりません
2020年6月13日
clearRectで顔が消えないのはなぜですか?
2020年5月17日
#20 高解像度ディスプレイに対応させよう
canvas.widthとcanvas.style.widthの違いは?
2020年11月3日
どの段階で密度が2倍になっているのですか?
2020年10月30日
なぜ線が綺麗に表示されるのか、理屈がすっきりしません
2020年7月31日
ギャラリー
このレッスンについて
最終更新日
2019年7月4日
バージョン情報
JavaScript (ES2017) / ブラウザ実行環境 / Visual Studio Code 1.35
関連キーワード
(4)
基礎講座
(324)
中級者向け
(114)
JavaScript (ES2017)
(35)
ウェブサイト構築
(150)
このレッスンを共有する