キャンバスへの描画を強化するNAKO3プラグイン 📖

ベジェ曲線描きたい！　❤️や⭐️も、しゅっと描きたい。LineDashやlineCapは設定したりしたい。ってゆうかラクに点線とか描きたい。白抜き文字や陰付き文字も書きたい。縦書きもしたい。ｖ１にはある角丸四角描きたい。扇形も描きたい。／描画中コンテキストのおかげで、なでしこだけでいろいろ出来るようになっているけれど、なでしこらしい命令でラクにやりたいのねん。

プログラム: (→大)
＃和スタイル追加 canvas和スタイル追加。 ●canvas和スタイル追加 　追加和スタイル＝{ "端切":"butt", "円":"round", "丸":"round", "四角":"square", "鋭角":"miter", "丸め":"round", "面取":"bevel", "面取り":"bevel", } 　追加和スタイルを反復 　　DOM和スタイル[対象キー]＝対象。 　ここまで。 ここまで。 ＃変数宣言 変数 読み込み完了ウェブフォント＝空辞書。 変数 パス描画中フラグ＝オフ。 ＃パス描画 ●パス描画開始 パス描画中フラグ＝オン。 描画中コンテキストの「beginPath」を[]でJSメソッド実行。 ここまで。 ●パス閉じる 描画中コンテキストの「closePath」を[]でJSメソッド実行。 ここまで。 ●パス描画終了 もし、塗り色設定取得≠空ならば、描画中コンテキストの「fill」を[]でJSメソッド実行。 もし、線色設定取得≠空ならば、描画中コンテキストの「stroke」を[]でJSメソッド実行。 パス描画中フラグ＝オフ。 ここまで。 ●(xyへ|xyに|xyまで)パス描画位置移動 変数 [x,y]＝xy。 描画中コンテキストの「moveTo」を[x,y]でJSメソッド実行。 ここまで。 ●(xyまで|xyへ)パス線描画 変数 [x,y]＝xy。 描画中コンテキストの「lineTo」を[x,y]でJSメソッド実行。 ここまで。 ●(制御点でxyへ|xyまで)二次ベジェ曲線描画 変数 [x,y]＝xy。 変数 [cpx,cpy]＝制御点。 描画中コンテキストの「quadraticCurveTo」を[cpx,cpy,x,y]でJSメソッド実行。 ここまで。 ●(制御点1と制御点2でxyへ|xyまで)三次ベジェ曲線描画 変数 [x,y]＝xy。 変数 [cpx1,cpy1]＝制御点1。 変数 [cpx2,cpy2]＝制御点2。 描画中コンテキストの「bezierCurveTo」を[cpx1,cpy1,cpx2,cpy2,x,y]でJSメソッド実行。 ここまで。 # 円弧と楕円弧はそれだけで描くこともできるようにする。 ●(中点に開始角から終了角まで半径の|中点へ)円弧描画 変数 [x,y]＝中点。 変数 pf＝パス描画中フラグ。 もし、pf＝オフならば、パス描画開始。 描画中コンテキストの「arc」を[x,y,半径,開始角,終了角,いいえ]でJSメソッド実行。 もし、pf＝オフならば、パス描画終了。 ここまで。 ●(中点に傾きで開始角から終了角まで半径の|中点へ)楕円弧描画 変数 [x,y]＝中点。 変数 [rx,ry]＝半径。 変数 pf＝パス描画中フラグ。 もし、pf＝オフならば、パス描画開始。 描画中コンテキストの「ellipse」を[x,y,rx,ry,傾き,開始角,終了角,いいえ]でJSメソッド実行。 もし、pf＝オフならば、パス描画終了。 ここまで。 ＃図形描画追加 ●(xyへ|xyに開始角から終了角まで半径の)扇描画 x,y＝xy。 描画中コンテキストの「beginPath」を[]でJSメソッド実行。 描画中コンテキストの「moveTo」を[x,y]でJSメソッド実行。 描画中コンテキストの「arc」を[x,y,半径,開始角,終了角,いいえ]でJSメソッド実行。 描画中コンテキストの「fill」を[]でJSメソッド実行。 描画中コンテキストの「closePath」を[]でJSメソッド実行。 描画中コンテキストの「stroke」を[]でJSメソッド実行。 ここまで。 ●(xywhへ|xywhに半径の)角丸四角描画 x,y,w,h＝xywh。 rx,ry＝半径。もしry＝未定義ならば、ry＝rx。 描画中コンテキストの「beginPath」を[]でJSメソッド実行。 描画中コンテキストの「moveTo」を[x+rx, y]でJSメソッド実行。 描画中コンテキストの「lineTo」を[x+w-rx, y]でJSメソッド実行。 描画中コンテキストの「ellipse」を[x+w-rx, y+ry, rx, ry, 0, PI*1.5, 0, 0]でJSメソッド実行。 描画中コンテキストの「lineTo」を[x+w, y+h-ry]でJSメソッド実行。 描画中コンテキストの「ellipse」を[x+w-rx, y+h-ry, rx, ry, 0, 0, PI*0.5, 0]でJSメソッド実行。 描画中コンテキストの「lineTo」を[x+rx, y+h]でJSメソッド実行。 描画中コンテキストの「ellipse」を[x+rx, y+h-ry, rx, ry, 0, PI*0.5, PI, 0]でJSメソッド実行。 描画中コンテキストの「lineTo」を[x, y+ry]でJSメソッド実行。 描画中コンテキストの「ellipse」を[x+rx, y+ry, rx, ry, 0, PI, PI*1.5, 0]でJSメソッド実行。 描画中コンテキストの「fill」を[]でJSメソッド実行。 描画中コンテキストの「closePath」を[]でJSメソッド実行。 描画中コンテキストの「stroke」を[]でJSメソッド実行。 ここまで。 ●(数で中点に半径の|中点へ)星描画 外径,内径＝半径。 もし、内径＝未定義ならば、内径は外径/2。 P＝空配列。 数*2回 角度＝(360/(数*2))*(回数-1)。 もし、回数%2＝１ならば、半径＝外径。 違えば、半径＝内径。 x＝半径*COS(((角度-90)をラジアン変換))＋中点[0]。 y＝半径*SIN(((角度-90)をラジアン変換))＋中点[1]。 Pへ[x,y]を配列追加。 ここまで。 Pで多角形描画。 ここまで。 ●(xywhの|xywhへ|xywhに)ハート描画 変数 [x,y,w,h]＝xywh。 変数 r＝w/4。 パス描画開始。 [x+r,y+r]に-180をラジアン変換から0までrの円弧描画。 [x+r*3,y+r]に-180をラジアン変換から0までrの円弧描画。 [x+r*2,y+h]まで[x+w,y+h/3*2]で二次ベジェ曲線描画。 [x,y+r]まで[x,y+h/3*2]で二次ベジェ曲線描画。 パス描画終了。 ここまで。 ＃文字描画関係 ●(xyへsを|xyにsの)文字輪郭描画 x,y＝xy。 描画中コンテキストの「strokeText」を[s,x,y]でJSメソッド実行。 ここまで。 ●(xyにsを文字間隔で|xyへ)縦書き文字描画 　x,y＝xy。sはsを文字列分解。 　もし、(整数変換(文字間隔)を非数判定)＝はいならば、文字間隔＝4。 　sを反復。 [x,y]に対象を文字描画。 y=y+(「あ」の文字高さ取得)+文字間隔。 　ここまで。 ここまで。 ●(xyにsを文字高さで|xyへ)等幅縦書き文字描画 　x,y＝xy。sはsを文字列分解。 　もし、(整数変換(文字高さ)を非数判定)＝はいならば、文字高さ＝sの文字高さ取得。 　sを反復。 [x,y]に対象を文字描画。 y=y+文字高さ。 　ここまで。 ここまで。 ●(xyにsを行間で|xyへ)文章描画 x,y＝xy。 もし、(整数変換(行間)を非数判定)＝はいならば、行間＝4。 s＝sを改行で区切る。 sを反復。 [x,y]へ対象を文字描画。 y＝y＋(「あ」の文字高さ取得)＋行間。 ここまで。 ここまで。 //whは[行間,文字間隔] ●(xyにwhでsを|xyへ)縦書き文章描画 x,y＝xy。s＝sを改行で区切る。 もし、wh＝空ならば、wh＝[0,2]。 行間,文字間隔＝wh。 もし、行間＝未定義ならば、行間＝0。 もし、文字間隔＝未定義ならば、文字間隔＝2。 w＝(「あ」の文字幅取得)＋行間。 sを反復 [x,y]に対象を文字間隔で縦書き文字描画。 x=x-w。 ここまで。 ここまで。 ＃＃文字描画幅取得 # めんどくさいのでｖ１互換っぽくする。 ●(Aの)文字幅取得 　　TM＝Aの文字描画幅取得。 　　TM["width"]で戻る。 ここまで。 # むじゅかしすぎるのでｖ１互換っぽくする。 ●(Aの)文字高さ取得 　　TM＝Aの文字描画幅取得。 　　TM["actualBoundingBoxAscent"]+TM["actualBoundingBoxDescent"]で戻る。 ここまで。 ＃＃ウェブフォント読み込み完了判定関数（仮） ●(フォントの|フォントをテスト文字列で)ウェブフォント読み込み完了待機 もし、テスト文字列＝空ならば、テスト文字列＝『「」－～…』 テスト文字列でフォントのウェブフォント読み込み完了判定。 (読み込み完了ウェブフォント[フォント]≠はい)の間 もし、読み込み完了ウェブフォント[フォント]＝いいえならば、 続ける。 違えば、もし、読み込み完了ウェブフォント[フォント]＝「エラー」ならば、 「{フォント}が読み込み出来ません」と言う。抜ける。 ここまで。 0.1秒待つ。 ここまで。 読み込み完了ウェブフォント[フォント]で戻る。 ここまで ●(フォントの|フォントをテスト文字列で)ウェブフォント読み込み完了判定 読み込み完了ウェブフォント[フォント]＝いいえ。 キャンバスとは変数＝描画中キャンバス。 Aとは変数=[0,0]のキャンバス作成。 「normal 36px {フォント}, serif」に描画フォント設定。 Bとは変数=[0,0]のキャンバス作成。 「normal 36px serif」に描画フォント設定。 100回 Aへ描画開始。 AWとは変数＝テスト文字列の文字幅取得。 AHとは変数＝テスト文字列の文字高さ取得。 Bへ描画開始。 BWとは変数＝テスト文字列の文字幅取得。 BHとは変数＝テスト文字列の文字高さ取得。 もし、(AW≠BW)または(AH≠BH)ならば、 キャンバスへ描画開始。 読み込み完了ウェブフォント[フォント]＝はい。 DOM親要素からAをDOM子要素削除。 DOM親要素からBをDOM子要素削除。 はいで戻る。 ここまで。 0.1秒待つ。 ここまで。 読み込み完了ウェブフォント[フォント]＝「エラー」 DOM親要素からAをDOM子要素削除。 DOM親要素からBをDOM子要素削除。 いいえで戻る。 ここまで。 ＃ドロップシャドウ ●(xyへ色をボカシで|xyに色の)ドロップシャドウ設定 x,y＝xy。もし、y＝未定義ならばy＝x。 描画中コンテキスト["shadowOffsetX"]＝x。 描画中コンテキスト["shadowOffsetY"]＝y。 描画中コンテキスト["shadowBlur"]＝ボカシ。 描画中コンテキスト["shadowColor"]＝色。 ここまで。 ●ドロップシャドウ設定消去 描画中コンテキスト["shadowOffsetX"]＝空。 描画中コンテキスト["shadowOffsetY"]＝空。 描画中コンテキスト["shadowBlur"]＝空。 描画中コンテキスト["shadowColor"]＝空。 ここまで。 ＃線の設定 /* 日本語での設定は線端形状も変更する。 通常通り配列で指定した場合には変更しないようにした。 線端形状を変えずに直線に戻す時は空配列を使う。 */ ●(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。 ここまで。 ＃撫子で設定した情報を取得 //カラーネームや空(=透明)をそのまま取得する。 ●塗り色設定取得 「sys.__fillStyle」をJS実行して戻す。 ここまで。 ●線色設定取得 「sys.__strokeStyle」をJS実行して戻す。 ここまで。 ＃描画中コンテキストの情報取得 ●塗り色取得 描画中コンテキスト["fillStyle"]を戻す。 ここまで。 ●線色取得 描画中コンテキスト["strokeStyle"]を戻す。 ここまで。 ●線太さ取得 描画中コンテキスト["lineWidth"]を戻す。 ここまで。 ●線端形状取得 描画中コンテキスト["lineCap"]を戻す。 ここまで。 ●角形状取得 描画中コンテキスト["lineJoin"]を戻す。 ここまで。 ●描画フォント取得 描画中コンテキスト["font"]を戻す。 ここまで。 ●破線開始位置取得 描画中コンテキスト["lineDashOffset"]を戻す。 ここまで。 ●破線パターン取得 描画中コンテキストの「getLineDash」を[]でJSメソッド実行して戻す。 ここまで。 ＃以下はテスト もし、プラグイン名＝「メイン」ならば、 # 白抜き文字 黒色に線色設定。１に線太さ設定。 ４８に描画フォント設定。 [10,50]へ「こんにちは」の文字輪郭描画 # 輪郭付き文字 「#EECCCC」に塗り色設定。紫色に線色設定。 [10,100]へ「なでしこさん」の文字描画 [10,100]へ「なでしこさん」の文字輪郭描画 # 陰付き文字 黒色に塗り色設定。 4へ6で灰色のドロップシャドウ設定。 [10,150]に「陰付き文字」の文字描画。 ドロップシャドウ設定消去。 # 角丸サイコロ 14に描画フォント設定。黒色に塗り色設定。 [30,195]に「角丸四角」を文字描画。 黒色に線色設定。３に線太さ設定。白色に塗り色設定。 [30,200,80,80]に１０の角丸四角描画 空に線色設定。赤色に塗り色設定。 [70,240]に15の円描画。 # 扇形 14に描画フォント設定。黒色に塗り色設定。 [150,195]に「扇形」を文字描画。 黒色に線色設定。1に線太さ設定。黄色に塗り色設定。 [150,200]に0から(60をラジアン変換)まで100の扇描画。 # 星形 14に描画フォント設定。黒色に塗り色設定。 [30,310]に「星形」を文字描画。 金色に線色設定。3に線太さ設定。黄色に塗り色設定。 5で[80,350]に50の星描画。 # ハート型 14に描画フォント設定。黒色に塗り色設定。 [130,310]に「ハート形」を文字描画。 赤色に線色設定。3に線太さ設定。紫色に塗り色設定。 [190,300,100,90]のハート描画。 # 破線・点線 キャンバス２＝[300,300]のキャンバス作成。 黒色に塗り色設定。０に破線開始位置設定。5に線太さ設定。12に描画フォント設定。 線種＝["丸点線","細点線","点線","破線","一点鎖線","中長破線","長破線","長鎖線","二点鎖線"] 色＝[赤色,青色,紫色,緑色,金色,黒色,オリーブ色,茶色,灰色] 線種を反復 色[対象キー]に線色設定。 対象に破線パターン設定。 y=20*対象キー+10。 [10,y]から[250,y]へ線描画。 [250,y+4]へ対象を文字描画。 ３に線太さ設定。 ここまで。 黒色に線色設定。「#FFCCCC」に塗り色設定。４に線太さ設定。「丸」に線端形状設定。 [10,8]に破線パターン設定。 C=0。 0.1秒毎には [98,198,104,84]の描画クリア。 Cに破線開始位置設定。 [100,200,100,80]へ四角描画。 C=C+1。 ここまで。 黒色に塗り色設定。24に描画フォント設定。 ２へ４で金色のドロップシャドウ設定。 [50,220]へ「縦書き」を縦書き文字描画。 [20,218]へ「したい！」を縦書き文字描画。 ドロップシャドウ設定消去。「#FFCCCC」に塗り色設定。 ここまで。