ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
料金プラン
レッスン一覧
料金プラン
ログイン
運営からのお知らせ
2024/10/03
NEW
【週刊ドットインストール】 DHHのお話、レッスン制作の進捗、その他のいろいろ
PREMIUM
JavaScriptでローディングアイコンを作ろう
HTML5のCanvasとJavaScriptでローディングアイコンを実装する方法について見ていきます。
0%
動画レッスン一覧
(7)
質問と回答
(19)
#01 ローディングアイコンを作っていこう
(02:52)
無料公開中
完成版の確認
index.htmlの作成
main.jsの作成
未完了
#02 Iconクラスを作っていこう
(02:48)
無料公開中
canvas要素の取得
即時関数への書き換え
Iconクラスの作成
run()
未完了
#03 円を描画してみよう
(02:12)
draw()
円の描画
未完了
#04 座標空間を移動させよう
(02:46)
座標空間の移動
未完了
#05 座標空間を回転させよう
(02:06)
座標空間の回転
目盛りの描画
未完了
#06 描画設定を保存、復元してみよう
(02:39)
描画設定の保存・復元
描画領域の塗りつぶし
未完了
#07 描画関連の処理を切り出そう
(02:30)
IconDrawerクラスの作成
動作確認
未完了
#02 Iconクラスを作っていこう
クラスの使い方を教えてください
2022年1月27日
即時関数を使う目的について教えて下さい
2022年1月27日
#04 座標空間を移動させよう
this.ctx.translate(); では、キャンバス自体が移動しているのですか?
2022年1月27日
translate の挙動について教えてください
2022年1月27日
#05 座標空間を回転させよう
JavaScript の Canvas では rotate の引数はラジアンと決まっているのでしょうか?
2022年3月24日
setTimeout(this.run(), 100); としてはいけないのですか?
2022年1月27日
なぜ + ではなくて += とするのですか?
2022年1月27日
#06 描画設定を保存、復元してみよう
処理内容が複雑になると、実行速度は遅くなるのでしょうか?
2022年1月27日
別のクラスで同じ名前のメソッドを作った際、どう区別されるのですか?
2022年1月27日
なぜオレンジが薄くなっていくのかわかりません
2022年1月27日
座標空間をクリアしない方法でやってみたのですがうまくいきません
2022年1月27日
save()、restore()を使わないとうまくいかない理由がわかりません
2022年1月27日
#07 描画関連の処理を切り出そう
どの仮引数がどの実引数に対応しているのか教えてください
2022年7月23日
「 IconDrawer クラスのインスタンスを Icon クラスに渡す」とはどういう意味ですか?
2022年1月27日
クラスの継承はどういったときに使うのですか?
2022年1月27日
コンストラクターで「this.run();」とするのはNGですか?
2022年1月27日
Iconクラスのコンストラクタで「this.drawer = new IconDrawer(canvas);」とするのはNGですか?
2022年1月27日
canvasの背景色はCSSで指定できないのですか?
2022年1月27日
描画関連の処理を分離するのはなぜ?
2022年1月27日
リリース情報(note)
今週は『JavaScriptでローディングアイコンを作ろう』をリリースしました。
詳細情報
最終更新日
2020年4月22日
バージョン情報
Chrome 80 / Visual Studio Code 1.44