ログインしていません。ログインなしで保存できる投稿数には制限があります。

プログラム編集

キャンバスへの描画を強化する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」に塗り色設定。
ここまで。

実行結果

保存

プログラムを保存

表示ページ

直前に実行または一時保存した内容を復元

実行環境

なでしこバージョン

素材

画像・音声・データ

ログインすると素材をアップロードできます。

🍯 プログラム貯蔵庫

プログラム

プログラムを保存

なでしこバージョン

画像・音声・データ