ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
料金プラン
レッスン一覧
料金プラン
ログイン
運営からのお知らせ
2024/09/05
NEW
【週刊ドットインストール】 レッスン制作の進捗、256timesのエディター更新、メンタリングの現場から
PREMIUM
詳解JavaScript Canvas編
JavaScriptで図形を描画することができるCanvasについて学んでいきます。
0%
動画レッスン一覧
(21)
質問と回答
(31)
#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要素を配置しよう
Canvas の領域指定が CSS ではなく HTML に書かれているのはなぜですか?
2022年1月27日
'use strict' ではどのようなエラーが検出されるのですか?
2022年1月27日
なぜブロックで囲むと良いのですか?
2022年1月27日
#03 四角を描画してみよう
canvas の原点はどこですか?
2022年5月19日
ブラウザが Canvas に対応しているかどうかを確認することができるのはなぜですか?
2022年2月18日
#06 線形グラデーションを設定しよう
const g = ctx.createLinearGradient(0, 0, canvas.width, 0); とありますが、なぜ括弧内の最後の 0 が canvas.height ではないのでしょうか?
2022年1月27日
ctx.fillStyle = gの意味がわかりません
2022年1月27日
#07 円形グラデーションを設定しよう
addColorStop(0.5, '#0f0'); の 0.5 が何を表しているのかわかりません
2022年8月23日
createRadialGradientの中心がなぜ「2」になるのですか?
2022年1月27日
#08 影をつけてみよう
shadowColorの設定をあとにすると影が描画されないのはなぜですか?
2022年1月27日
#09 線を描画してみよう
ctx.closePath();の指定は任意ですか?
2022年1月27日
#10 線のスタイルを設定しよう
「 5, 10 」 の間にスペースを開ける必要はあるのですか?
2022年7月9日
#11 円弧を描画してみよう
なぜ 2 * Math.PI が 360 度になるのかわかりません
2022年7月9日
#12 楕円を描画してみよう
rotation の傾きの挙動が理解できません
2023年9月2日
rect() と fillRect() の違いはなんですか?
2022年1月27日
#13 テキストを描画してみよう
縦長の文字が描画できて横長の文字ができないのはなぜですか?
2022年1月27日
Tokyo が左下に配置されるのはなぜですか?
2022年1月27日
#14 画像を描画してみよう
document.createElement('img') はどこから取得しているのですか?
2022年8月22日
createPattern() で画像の幅や高さを設定できますか?
2022年1月27日
addEventListenerを使う理由がわかりません
2022年1月27日
#17 座標空間を変形させてみよう
2 * Math.PI の数値が scale() の影響を受けないのはなぜですか?
2022年1月27日
#18 描画設定を保存、復元してみよう
座標系が 3 つ以上の場合、保存・復元はどうすればよいですか?
2022年1月27日
なぜ save() が必要なのですか?
2022年1月27日
#19 アニメーションさせてみよう
なぜ let t = 0 を draw 関数の外に出す必要があるのですか?
2022年1月27日
clearRect()を使わないといけない理由がわかりません
2022年1月27日
Math.sin()に入れている数値の意味がわかりません
2022年1月27日
clearRectで顔が消えないのはなぜですか?
2022年1月27日
#20 高解像度ディスプレイに対応させよう
canvas.width と canvas.style.width はどう違うのですか?
2022年1月27日
canvas.widthとcanvas.style.widthの違いは?
2022年1月27日
どの段階で密度が2倍になっているのですか?
2022年1月27日
なぜ線が綺麗に表示されるのか、理屈がすっきりしません
2022年1月27日
リリース情報(note)
『詳解JavaScript Canvas編』をリリースしました
詳細情報
最終更新日
2019年7月4日
バージョン情報
JavaScript (ES2017) / ブラウザ実行環境 / Visual Studio Code 1.35