ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
プレミアム会員
法人でのご利用
レッスン一覧
プレミアム会員
法人でのご利用
ログイン
運営からのお知らせ
2023/06/01
NEW
『JavaScript入門 DOM編』をリリースしました
2023/06/01
NEW
週刊ドットインストール(2023/06/01号)を更新しました!
PREMIUM
JavaScriptでアナログ時計を作ろう
HTML5のCanvasを使って、シンプルなアナログ時計を作る方法について見ていきます。
0%
動画レッスン一覧
(10)
質問と回答
(19)
未完了
#01 アナログ時計を作ってみよう
(02:43)
無料公開中
index.htmlの作成
main.jsの作成
未完了
#02 Clockクラスを作ろう
(02:33)
無料公開中
Clockクラスの作成
描画コンテクストを取得
未完了
#03 盤面を描く準備をしよう
(02:14)
無料公開中
ループ処理
移動、回転
未完了
#04 短い目盛りを描画しよう
(01:54)
短い目盛りの描画
未完了
#05 盤面を完成させよう
(02:35)
長い目盛りの描画
数字の描画
未完了
#06 ClockDrawerクラスを作ろう
(02:40)
クラスの整理
即時関数
未完了
#07 メソッドを整理しよう
(02:36)
drawFaceメソッドの整理
drawメソッドの実装
未完了
#08 時針を描画しよう
(02:46)
getHours()
getMinutes()
getSeconds()
時針の描画
未完了
#09 分針、秒針を描画しよう
(01:36)
分針の描画
秒針の描画
未完了
#10 時計を動かしてみよう
(02:32)
setTimeout()
clearRect()
#04 短い目盛りを描画しよう
save() を for() の外に出すと動作しなくなるのはなぜですか?
2022年1月27日
y 座標は、上がプラスではないのですか?
2022年1月27日
#05 盤面を完成させよう
|| はなぜ false を表すのですか?
2022年1月27日
fillText の引数の 0 は何を表していますか?
2022年1月27日
#06 ClockDrawerクラスを作ろう
アロー関数式はどうすれば従来の関数宣言に直せますか?
2023年4月10日
このレッスンのコードだけでは何も描画されないのはなぜですか?
2022年4月4日
なぜ即時関数を使うのですか?
2022年2月10日
drawerは何を指しているのでしょうか?
2022年1月27日
なぜ引数でcanvasを渡すのですか?
2022年1月27日
#07 メソッドを整理しよう
func(this.ctx); 周辺の処理の流れについて教えてください
2023年4月15日
実行順序について教えてください
2022年1月27日
constructor(canvas) のあとに this.canvas = canvas; を記述しないのはなぜですか?
2022年1月27日
drawメソッドの引数について教えて下さい
2022年1月27日
ClockDrawerにも描画に関するコードがあるようですが...?
2022年1月27日
func(this.ctx);はどういう意味ですか?
2022年1月27日
#08 時針を描画しよう
new Date()をなぜ括弧でかこっているのですか?
2022年1月27日
#10 時計を動かしてみよう
世界時計の表示のように、複数のアナログ時計を表示する方法は?
2022年1月27日
プロパティの定義はどこでしてもいいのですか?
2022年1月27日
draw関数の引数はもっとすっきり書けませんか?
2022年1月27日
ギャラリー
このレッスンについて
最終更新日
2019年10月4日
バージョン情報
Chrome 77.0 / Visual Studio Code 1.38.1
関連キーワード
(5)
基礎講座
(369)
中級者向け
(115)
HTML
(115)
JavaScript (ES2017)
(36)
ミニプログラム
(142)
このレッスンを共有する