ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
プレミアム会員
法人でのご利用
レッスン一覧
プレミアム会員
法人でのご利用
ログイン
運営からのお知らせ
2023/06/01
NEW
『JavaScript入門 DOM編』をリリースしました
2023/06/01
NEW
週刊ドットインストール(2023/06/01号)を更新しました!
PREMIUM
【旧版】Canvasでアナログ時計を作ろう
HTML5のCanvasを使って、シンプルなアナログ時計を作る方法について見ていきます。
0%
新しいレッスンがあります
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
PREMIUM
JavaScriptでアナログ時計を作ろう
HTML5のCanvasを使って、シンプルなアナログ時計を作る方法について見ていきます。
0%
動画レッスン一覧
(7)
質問と回答
(1)
未完了
#01 アナログ時計を作ってみよう
(02:40)
無料公開中
index.htmlの作成
main.jsの作成
未完了
#02 外枠を描画しておこう
(02:28)
無料公開中
contextオブジェクトの取得
円の描画
未完了
#03 目盛りを描画してみよう
(02:51)
目盛りの描画
未完了
#04 盤面を完成させよう
(02:32)
数字の描画
未完了
#05 時針、分針、秒針を描画しよう
(02:32)
針の描画
未完了
#06 現在時刻を表示させてみよう
(01:34)
getHours()
getMinutes()
getSeconds()
未完了
#07 時計を動かしてみよう
(02:08)
setTimeout()
#04 盤面を完成させよう
ctx.fillText(angle / 30, 0, -r +25); とするだけで数字が描画ができる理由を教えてください
2017年9月22日
ギャラリー
このレッスンについて
最終更新日
2017年4月6日
バージョン情報
HTML5 / CSS / CSS3 / JavaScript
関連キーワード
(6)
基礎講座
(369)
初心者向け
(368)
HTML
(115)
CSS
(116)
JavaScript
(6)
ミニプログラム
(142)
このレッスンを共有する