▶ 実 行
▶ 実行
クリア
キャンバスへの描画を強化するNAKO3プラグイン
by 雪乃☆雫
#和スタイル追加 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=1ならば、半径=外径。 違えば、半径=内径。 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。 ここまで。 ここまで。 ##文字描画幅取得 # めんどくさいのでv1互換っぽくする。 ●(Aの)文字幅取得 TM=Aの文字描画幅取得。 TM["width"]で戻る。 ここまで。 # むじゅかしすぎるのでv1互換っぽくする。 ●(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メソッド実行して戻す。 ここまで。 #以下はテスト もし、プラグイン名=「メイン」ならば、 # 白抜き文字 黒色に線色設定。1に線太さ設定。 48に描画フォント設定。 [10,50]へ「こんにちは」の文字輪郭描画 # 輪郭付き文字 「#EECCCC」に塗り色設定。紫色に線色設定。 [10,100]へ「なでしこさん」の文字描画 [10,100]へ「なでしこさん」の文字輪郭描画 # 陰付き文字 黒色に塗り色設定。 4へ6で灰色のドロップシャドウ設定。 [10,150]に「陰付き文字」の文字描画。 ドロップシャドウ設定消去。 # 角丸サイコロ 14に描画フォント設定。黒色に塗り色設定。 [30,195]に「角丸四角」を文字描画。 黒色に線色設定。3に線太さ設定。白色に塗り色設定。 [30,200,80,80]に10の角丸四角描画 空に線色設定。赤色に塗り色設定。 [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]のハート描画。 # 破線・点線 キャンバス2=[300,300]のキャンバス作成。 黒色に塗り色設定。0に破線開始位置設定。5に線太さ設定。12に描画フォント設定。 線種=["丸点線","細点線","点線","破線","一点鎖線","中長破線","長破線","長鎖線","二点鎖線"] 色=[赤色,青色,紫色,緑色,金色,黒色,オリーブ色,茶色,灰色] 線種を反復 色[対象キー]に線色設定。 対象に破線パターン設定。 y=20*対象キー+10。 [10,y]から[250,y]へ線描画。 [250,y+4]へ対象を文字描画。 3に線太さ設定。 ここまで。 黒色に線色設定。「#FFCCCC」に塗り色設定。4に線太さ設定。「丸」に線端形状設定。 [10,8]に破線パターン設定。 C=0。 0.1秒毎には [98,198,104,84]の描画クリア。 Cに破線開始位置設定。 [100,200,100,80]へ四角描画。 C=C+1。 ここまで。 黒色に塗り色設定。24に描画フォント設定。 2へ4で金色のドロップシャドウ設定。 [50,220]へ「縦書き」を縦書き文字描画。 [20,218]へ「したい!」を縦書き文字描画。 ドロップシャドウ設定消去。「#FFCCCC」に塗り色設定。 ここまで。