アナログ時計（ダークテーマ、秒針） 📖

描画回転と線描画機能でアナログ時計の針を表示します。現状では、複数の針を表示できません。

プログラム: (→大)

＃アナログ時計（ダークテーマ、秒針、描画回転、線描画）
＃2021/06/05

/*＃はじめに
描画回転と線描画機能でアナログ時計の針を表示します。
現状では、複数の針を表示できません。
//「document」に｛背景色：黒色｝をDOMスタイル一括設定します。
//DOM親要素に『<body BGCOLOR="#202020">』をHTML設定します。
*/
/*ページ全体の背景色を黒にする*/「document.bgColor = "#202020"; document.fgColor = "#E0E0E0";」をJS実行します。
※注記：「bgColor」で背景色、「fgColor」で前面色や文字の色を設定します。

#線描画を使う場合の設定
/*かく所の幅と大きさ*/幅に描画中キャンバスの「width」をDOM属性取得して代入します。高さに描画中キャンバスの「height」をDOM属性取得して代入します。
/*針の色*/ピンクはRGB(255,64,129)です。 ピンクに塗色設定して、ピンクに線色設定します。
/*針の太さ*/8に線太設定します。
/*針の長さ*/長針長さは幅÷2×0.9です。短針長さは長針長さ×0.8です。
//消す位置は[0,0,50+50×(2の平方根)+1,50+50×(2の平方根)+1]です。
//回す位置は[50,50]です。
中心は[幅÷2,高さ÷2]です。
回す位置は中心です。
角度は0です。
描く位置は 「[0,0]から[長針長さ,0]」です。
※注記：設定値は順に[左右位置X、上下位置Y、幅W、高さH]を表します。[~]は配列変数です。

※[0,0,幅,高さ]へ四角描画します。
//描画中キャンバスの背景色は「黒色」です。

#かく
1/60秒毎には（画面更新）
    /*時刻取得*/今を「:」で区切ります。時数に「{それ[0]}」を代入して、分数に「{それ[1]}」を代入して、秒数に「{それ[2]}」を代入します。
    /*時数を12時間で表す*/時数12は時数です。もし、時数が13以上ならば、時数12は時数12-12です。
    長針角は360×((時数12+分数/60)/12)-90です。
    短針角は360×((分数+秒数/60)/60)-90です。
    秒針角は360×(秒数/60)-90です。

    ※注記：現状では1本ずつしか表示できません。
    ※表示したい針を有効化します。
    ＃/*長針を表示する*/長針角を角度に代入します。
    ＃/*短針を表示する*/短針角を角度に代入します。
    ＃/*秒針を表示する*/秒針角を角度に代入します。
    ＃
    /*滑らかに動く秒針を表示する*/角度は角度+(360/60×(1/60))です。

    /*けす*/全描画クリアして、キャンバス状態保存します。
    /*角度*/中心に描画起点設定して、角度に描画回転します。
    /*かく*/[0,0]から[長針長さ,0]まで線描画して、キャンバス状態復元します。

    回数＝回数＋1
    もし、回数が50以上ならば、画面更新のタイマー停止します。
    ここまで。

プログラムを実行

⭐ くれあ作
タイトル: アナログ時計（ダークテーマ、秒針）
ライセンス: MIT (改変可/表示)
タイプ: wnako
タグ: -
利用バージョン: 3.2.15
作成日時: 2021/05/16 15:42 (編集: 2021/06/13 17:59)
公開の投稿

ログインして★を付けよう！

Twitterへ投稿

アナログ時計（ダークテーマ、秒針）

アナログ時計（ダークテーマ、秒針） 📖

作品公開情報