🌸 「なでしこ3」
>
🍯 「貯蔵庫」
キャンバスに破線・点線を描くやつ
🌟新規
📒一覧
🔌ライブラリ
🔍検索
🚪ログイン
キャンバスに破線・点線を描くやつ 📖
LineDashやlineCapは設定したりしたい。ってゆうかラクに点線とか描きたいのねん。そんだけ。
プログラム:
(→大)
canvas和スタイル追加。 もし、プラグイン名=「メイン」ならば、 黒色に塗り色設定。0に破線開始位置設定。5に線太さ設定。12に描画フォント設定。 線種=["丸点線","細点線","点線","破線","一点鎖線","中長破線","長破線","長鎖線","二点鎖線"] 色=[赤色,青色,紫色,緑色,金色,黒色,オリーブ色,茶色,灰色] 線種を反復 色[対象キー]に線色設定。 対象に破線パターン設定。 y=20*対象キー+10。 [10,y]から[240,y]へ線描画。 [245,y+4]へ対象を文字描画。 3に線太さ設定。 ここまで。 黒色に線色設定。「#FFCCCC」に塗り色設定。4に線太さ設定。「丸」に線端形状設定。 [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メソッド実行して戻す。 ここまで。
雪乃☆雫 作
利用バージョン:
3.3.52
投稿日時:
2022/06/11 15:24 (編集: 2022/08/13 21:09)
ライセンス:
CC0 (著作権破棄)
タイプ:
wnako
公開の投稿
⭐
ログイン
して★を付けよう!
Twitterへ投稿
📝作品を編集
作品公開情報
📍この作品のURL:
📍アプリ(即時実行)のURL:
📍アプリ(実行ボタンあり)のURL:
📍ブログパーツ:
上記HTML↑をブログに貼り付けることでアプリを埋め込めます。
📍ライブラリ直リンク - 『!「***」を取込』で使うとき:
通報数:
-
通報って何?