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

アナログ時計V3aの針を変更しました。

#アナログ時計V3b

#キャンバス作成
[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」の文字描画

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

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

#時針の位置計算と表示
時角0は時時+分分/60
時角1はDEG2RAD(時角0*30)
X1=SIN(時角1)*43
Y1=COS(時角1)*43
時角2はDEG2RAD(時角0*30-90)
X2=SIN(時角2)*9
Y2=COS(時角2)*9
時角3はDEG2RAD(時角0*30+90)
X3=SIN(時角3)*9
Y3=COS(時角3)*9
RGB(0,150,0)に線色設定　#緑色
RGB(0,150,0)に塗色設定
1に線太設定
[[75+X1,75-Y1],[75+X2,75-Y2],[75+X3,75-Y3]]で多角形描画

#分針の位置計算と表示
分角0は分分+秒秒/60
分角1はDEG2RAD(分角0*6)
X1=SIN(分角1)*58
Y1=COS(分角1)*58
分角2はDEG2RAD(分角0*6-90)
X2=SIN(分角2)*5
Y2=COS(分角2)*5
分角3はDEG2RAD(分角0*6+90)
X3=SIN(分角3)*5
Y3=COS(分角3)*5
青色に線色設定
青色に塗色設定
1に線太設定
[[75+X1,75-Y1],[75+X2,75-Y2],[75+X3,75-Y3]]で多角形描画

#秒針の位置計算と表示
秒角はDEG2RAD(秒秒*6)
X=SIN(秒角)*68
Y=COS(秒角)*68

赤色に線色設定
2に線太設定
[75,75]から[75+X,75-Y]へ線描画
2に線太設定
秒角RはDEG2RAD(秒秒*6+180)
#秒針の後ろにまる
XR=SIN(秒角R)*20
YR=COS(秒角R)*20
XR1=SIN(秒角R)*13
YR1=COS(秒角R)*13
「rgba(0,0,0,0)」に塗色設定
[75+XR,75-YR]へ7の円描画
赤色に線色設定
[75,75]から[75+XR1,75-YR1]へ線描画

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

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

🍯 プログラム貯蔵庫

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

素材のアップロード