円形ゲージを描画

ソース

プログラム

# V ：ゲージで表す割合 (0 以上 1 以下)
# XY：ゲージの中心座標を表す配列 [x, y]
# R ：ゲージの半径
# 「塗色設定」を反映する。
# 「線色設定」は無視し、常にフチは無しとする。
●(VでXYにRの)円形ゲージ描画とは
  キャンバス状態保存。
  「#00000000」に線色設定。
  XYに描画起点設定。
  [R, R]に描画拡大。
  Vの0から1までのCLAMPして2×PIを掛ける。
  定数のゲージ角度はそれ。
  定数の座標配列は[[0, -3], [0, 0], [1.5×SIN(ゲージ角度), -1.5×COS(ゲージ角度)]]。
  もし、Vが0.5超ならば
    座標配列に[-3, 0]を配列追加。
    座標配列に[0, 3]を配列追加。
  ここまで。
  座標配列に[3, 0]を配列追加。
  キャンバス状態保存。
  「#00000000」に塗色設定。
  座標配列の多角形描画。
  キャンバス状態復元。
  描画クリップ。
  [0, 0]に1の円描画。
  キャンバス状態復元。
ここまで。

もし、プラグイン名が「メイン」ならば
  # 撫子色 https://www.colordic.org/colorsample/2023
  「#eebbcb」に塗色設定。
  [0,1,0]の値指定バー作成。
  それの「step」に「any」をDOM属性設定。
  それの「input」がDOMイベント発火した時には
    全描画クリア。
    対象のテキスト取得して実数変換。
    それで[150, 150]に100の円形ゲージ描画。
  ここまで。
ここまで。

作品について

作品情報

作品を編集

みけCAT 作

ライセンス: CC0（著作権破棄）
形式: wnako
タグ: ライブラリ
利用バージョン: 3.7.19
アクセス数(累計): 20
アクセス数(今月): 20
更新日時: 2026/05/03 09:01 編集: 2026/05/03 09:09

作品公開情報

交流

円形ゲージを描画

プログラム

作品情報

コメント