ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
料金プラン
レッスン一覧
料金プラン
ログイン
運営からのお知らせ
2024/10/03
NEW
【週刊ドットインストール】 DHHのお話、レッスン制作の進捗、その他のいろいろ
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日
リリース情報(note)
VS Code、クラス構文に対応した『JavaScriptでアナログ時計を作ろう』をリリースしました
詳細情報
最終更新日
2019年10月4日
バージョン情報
Chrome 77.0 / Visual Studio Code 1.38.1