キャンバスに破線・点線を描くやつ 📖

LineDashやlineCapは設定したりしたい。ってゆうかラクに点線とか描きたいのねん。そんだけ。

プログラム: (→大)
canvas和スタイル追加。 もし、プラグイン名＝「メイン」ならば、 黒色に塗り色設定。０に破線開始位置設定。5に線太さ設定。12に描画フォント設定。 線種＝["丸点線","細点線","点線","破線","一点鎖線","中長破線","長破線","長鎖線","二点鎖線"] 色＝[赤色,青色,紫色,緑色,金色,黒色,オリーブ色,茶色,灰色] 線種を反復 　 色[対象キー]に線色設定。 　対象に破線パターン設定。 　y=20*対象キー+10。 　[10,y]から[240,y]へ線描画。 　[245,y+4]へ対象を文字描画。 　３に線太さ設定。 ここまで。 黒色に線色設定。「#FFCCCC」に塗り色設定。４に線太さ設定。「丸」に線端形状設定。 [10,8]に破線パターン設定。 C=0 0.1秒毎には [98,198,104,84]の描画クリア。 Cに破線開始位置設定。 [100,200,100,80]へ四角描画。 C=C+1。 ここまで。 ここまで。 ●canvas和スタイル追加 　追加和スタイル＝{ "端切":"butt", "円":"round", "丸":"round", "四角":"square", "鋭角":"miter", "丸め":"round", "面取":"bevel", "面取り":"bevel", } 　追加和スタイルを反復 　　DOM和スタイル[対象キー]＝対象。 　ここまで。 ここまで。 ＃線の設定 //日本語での設定は線端形状も変更する。 //通常通り配列で指定した場合には変更しないようにした。 //線端形状を変えずに直線に戻す時は空配列を使う。 ●(Aに|Aへ)破線パターン設定 もし、(Aの変数型確認)＝「object」でなければ、 「butt」に線端形状設定。 線太＝線太さ取得。 Aで条件分岐 「丸点線」ならば、 「round」に線端形状設定。 A＝[1,線太さ*2] ここまで。 「細点線」ならば、A＝[線太さ,線太さ]。。。 「点線」ならば、A＝[線太さ*2,線太さ*2]。。。 「破線」ならば、A＝[線太さ*4,線太さ*2]。。。 「一点鎖線」ならば、A＝[線太さ*6,線太さ*2,線太さ*2,線太さ*2]。。。 「中長破線」ならば、A＝[線太さ*6,線太さ*2]。。。 「長破線」ならば、A＝[線太さ*8,線太さ*2]。。。 「長鎖線」ならば、A＝[線太さ*8,線太さ*2,線太さ*2,線太さ*2]。。。 「二点鎖線」ならば、A＝[線太さ*8,線太さ*2,線太さ*2,線太さ*2,線太さ*2,線太さ*2]。。。 違えば、A＝[]。。。 ここまで。 ここまで。 描画中コンテキストの「setLineDash」を[A]でJSメソッド実行。 ここまで。 ●(Aに|Aへ)破線開始位置設定 描画中コンテキスト["lineDashOffset"]＝A。 ここまで。 ●(Aに|Aへ)線端形状設定 もし、(DOM和スタイルにAが辞書キー存在）ならば、A＝DOM和スタイル[A]。 描画中コンテキスト["lineCap"]＝A。 ここまで。 ●(Aに|Aへ)角形状設定 もし、(DOM和スタイルにAが辞書キー存在）ならば、A＝DOM和スタイル[A]。 描画中コンテキスト["lineJoin"]＝A。 ここまで。 ＃描画中コンテキストの情報取得 ●塗り色取得 描画中コンテキスト["fillStyle"]を戻す。 ここまで。 ●線色取得 描画中コンテキスト["strokeStyle"]を戻す。 ここまで。 ●線太さ取得 描画中コンテキスト["lineWidth"]を戻す。 ここまで。 ●線端形状取得 描画中コンテキスト["lineCap"]を戻す。 ここまで。 ●角形状取得 描画中コンテキスト["lineJoin"]を戻す。 ここまで。 ●描画フォント取得 描画中コンテキスト["font"]を戻す。 ここまで。 ●破線開始位置取得 描画中コンテキスト["lineDashOffset"]を戻す。 ここまで。 ●破線パターン取得 描画中コンテキストの「getLineDash」を[]でJSメソッド実行して戻す。 ここまで。