[編集モード] アナログ時計V3a

「アナログ時計」の改訂版です。大きさ、色、目盛り、針の形を変更しました、

#アナログ時計V3a

#キャンバス作成
[150,150]のキャンバス作成

#時計更新
「時計更新」を0.1秒毎

●時計更新とは
#時計枠描画
全描画クリア
1に線太設定
黒色に線色設定
青色に塗色設定
[0,0,150,150]へ四角描画
RGB(200,250,255)に塗色設定
[75,75]に75の円描画

#分目盛り描画
p=0
６０回
　ｑ＝DEG2RAD(p)
　X1=SIN(q)*70
　Y1=COS(q)*70　
　X2=SIN(q)*75
　Y2=COS(q)*75　
　黒色に塗色設定
　1に線太設定
    [75+X1,75-Y1]から[75+X2,75-Y2]へ線描画
 　p＝p+6
ここまで

#時目盛り描画
p=0
12回
　ｑ＝DEG2RAD(p)
　X1=SIN(q)*66
　Y1=COS(q)*66
　X2=SIN(q)*75
　Y2=COS(q)*75
　黒色に塗色設定。
　3に線太設定
    [75+X1,75-Y1]から[75+X2,75-Y2]へ線描画
 　p＝p+30
ここまで

#文字描画
赤色に塗色設定
「18px sans-serif」に描画フォント設定
[64,26]に「12」の文字描画
[130,82]に「3」の文字描画
[70,138]に「6」の文字描画
[12,82]に「9」の文字描画
RGB(20,20,20)に塗色設定　#灰色

#時刻データ取得
時時は今で2文字左部分
分分は今で4から2文字抜き出す
秒秒は今で2文字右部分

#AM/PM等文字描画
もし、時時<12ならば
　[60,50]に「AM」を文字描画
違えば
　[60,50]に「PM」を文字描画
ここまで
「10px sans-serif」に描画フォント設定
[50,105]に「NADESIKO」を文字描画

#時針の位置計算と表示
時角1は時時+分分/60
時角2はDEG2RAD(時角1*30)
X=SIN(時角2)*43
Y=COS(時角2)*43
RGB(0,150,0)に線色設定　#緑色
8に線太設定
[75,75]から[75+X,75-Y]へ線描画
#針先を丸める。
１に線太設定
RGB(0,150,0)に塗色設定
[75+X,75-Y]に3の円描画

#分針の位置計算と表示
分角1は分分+秒秒/60
分角2はDEG2RAD(分角1*6)
X=SIN(分角2)*58
Y=COS(分角2)*58
青色に線色設定
6に線太設定
[75,75]から[75+X,75-Y]へ線描画
#針先を丸める
１に線太設定
青色に塗色設定
[75+X,75-Y]に2の円描画

#秒針の位置計算と表示
秒角はDEG2RAD(秒秒*6)

X=SIN(秒角)*68
Y=COS(秒角)*68

赤色に線色設定
2に線太設定
[75,75]から[75+X,75-Y]へ線描画
６に線太設定
秒角RはDEG2RAD(秒秒*6+180)
#秒針の後ろに四角
XR=SIN(秒角R)*25
YR=COS(秒角R)*25
[75,75]から[75+XR,75-YR]へ線描画

#中央に丸
赤色に塗色設定
[75,75]に6の円描画
ここまで

デバッグ × キャンバス: 幅 × 高

🍯 プログラム貯蔵庫

[編集モード] アナログ時計V3a

素材のアップロード