ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
料金プラン
レッスン一覧
料金プラン
ログイン
運営からのお知らせ
2024/04/18
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)
記事はありません。
関連キーワード
基礎講座
(399)
初心者向け
(387)
HTML
(118)
CSS
(120)
JavaScript
(6)
ミニプログラム
(143)
詳細情報
最終更新日
2017年4月6日
バージョン情報
HTML5 / CSS / CSS3 / JavaScript