ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
料金プラン
レッスン一覧
料金プラン
ログイン
運営からのお知らせ
2025/03/27
NEW
【週刊ドットインストール】 Nuxt入門のレッスンをリリースしました
2025/03/24
NEW
『Nuxt入門 基礎編』をリリースしました
2024/05/07
NEW
あなただけの学習ロードマップを作成します 【随時受付中】
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日
リリース情報(note)
記事はありません。
詳細情報
最終更新日
2017年4月6日
バージョン情報
HTML5 / CSS / CSS3 / JavaScript