ドット絵エディタ改の改の改の改 📖

雪乃☆雫さんの「ドット絵エディタ改の改の改」をちょとだけ改造したもの。改造は２点。・「ナデシコする」を使わないように変更。・apng形式のpngファイルとしてダウンロードするボタンを追加。ループ回数やフレームレート等のパラメータはとりあえず決め打ちで、１秒切り替えの無限ループ。

プログラム: (→大)
#------------------------------------------------------------------- # ドット絵エディタ改の改の改 #------------------------------------------------------------------- !「https://n3s.nadesi.com/plain/752.js」を取り込む ＃-----初期設定---------- ＃＃サイズ ドット列数＝16。//ドット数（横） ドット行数＝16。//ドット数（縦） キャンバス幅=400 # ←キャンバスの大きさ もしクライアント幅＜キャンバス幅ならば、ドット幅＝INT(クライアント幅/ドット列数) 違えば、ドット幅＝INT(キャンバス幅÷ドット列数) キャンバス幅＝ドット列数*ドット幅。//列数を変えても余白を出さないように。 キャンバス高さ＝ドット幅*ドット行数。 ＃＃フラグ マウスフラグ＝オフ。 画像保存形式＝1。//0=バラバラ。1=横につなげる。 編集中ドット絵＝1。 枚数＝1。 ＃＃パレット パレット数＝8。//パレット数変えられます。パレットデータが空の部分は黒色になる。 初期パレット＝["#000000","#ff0000","#00ff00","#0000ff","#ffff00","#ff00ff","#00ffff","#999999"]。//「#RRGGBB」形式のみ。 パレットデータ＝初期パレットを配列複製。 ペンモード＝1。//0に透明を設定しているので、1がパレットデータ[0]になる。 描画色データ＝パレットデータ[ペンモード-1]で描画色データ作成。 ＃＃グリッド グリッド＝オン。 グリッド色＝「#DDDDDD」 ＃＃データ ドット絵データ＝空配列。 描画データ＝空配列。 保存用データ＝空オブジェクト。 ＃＃---データ初期化---------- //「ドット絵エディタ自動保存データ」をローカルストレージキー削除。 ＃＃＃ローカルストレージ読む もし、「ドット絵エディタ自動保存データ」が存在するならば、 　「ドット絵エディタ自動保存データ」を開いて保存用データに代入。 　パレットデータ＝保存用データ["パレットデータ"] 　ドット絵データ＝保存用データ["ドット絵データ"][0] 　枚数＝保存用データ["ドット絵データ"]の要素数。 違えば、 　保存用データ["パレットデータ"]＝パレットデータ。 　保存用データ["ドット絵データ"]＝空配列。 　データ初期化処理。 　保存用データ["ドット絵データ"][0]＝ドット絵データ。 ここまで。 ●データ初期化処理とは 　　Yを0から(ドット行数-1)まで繰り返す 　　　　ドット絵データ[Y]＝空配列。 　　　　Xを0から(ドット列数-1)まで繰り返す 　　　　　　ドット絵データ[Y][X]＝0。 　　　　ここまで。 　　ここまで。 　　(ドット列数*ドット行数*4)回 　　　　描画データ[回数-1]＝0。 　　ここまで。 ここまで。 # 「#RRGGBB」を[r,g,b,a]にする。 ●(描画色で)描画色データ作成 　色は描画色をRGB分解。 　色は色に255を配列追加。 　色で戻る。 ここまで。 ＃-----UI作成/スタイル/イベント設定---------- DOM親要素に『<style> .nako3_div > button { margin: 4px; padding: 4px 4px 0px; font-size: 0.9em; } </style>』をHTML設定。 ＃＃---エディタ設定---------- ドット絵エディタは描画中キャンバス。 　ドット絵エディタを[キャンバス幅,キャンバス高さ]にキャンバスサイズ設定。 ＃＃---パレット作成---------- パレット＝空配列。 パレット数回 　　パレット[回数]＝パレットデータ[回数-1]のパレット作成。 　　パレット[回数]の「data-index」に回数をDOM属性設定。 ここまで。 ペンモードのパレット点灯。 ●描画色変更クリック 　　EVTはWINDOW["event"] 　　番号はEVT["target"]の「data-index」をDOM属性取得。 　　番号で描画色変更。 ここまで。 パレット数回 　　パレット[回数]の「onclick」に「描画色変更クリック」をDOMイベント設定。 ここまで。 # 消ボタン（透明） パレット[0]＝白色のパレット作成。 　パレット[0]に{ 　　マージン: "4px 16px", 　　"background-image": "linear-gradient(45deg, #f0f0f0 25%, transparent 25%, transparent 75%, #f0f0f0 75%), linear-gradient(45deg, #f0f0f0 25%, transparent 25%, transparent 75%, #f0f0f0 75%)", "background-position": "0 0, 6px 6px", "background-size": "12px 12px", 　}をDOMスタイル一括設定。//divの背景を市松にするCSS 改行作成。 ●(色の)パレット作成 　　IDとは変数＝「nadesi-dom-{DOM生成個数}」。 　　DOM生成個数＝DOM生成個数+1。 　　ELとは変数＝「div」のDOM要素作成。 　　ELに{ 　　　マージン: "4px", 　　　幅: "28px", 　　　高さ: "28px", 　　　ボックス表示: "inline-block", 　　　背景色: 色, 　　　ボーダー: "solid 1px {灰色}", 　　　"border-radius": "14px", 　　}をDOMスタイル一括設定。 　　もし、クライアント幅＜400ならば、 　　　　ELに{ 　　　　　幅: "24px", 　　　　　高さ: "24px", 　　　　　"border-radius": "12px", 　　　}をDOMスタイル一括設定。 　　ここまで。 　　ELの「id」にIDをDOM属性設定。 　　DOM親要素へELをDOM子要素追加。 　　ELで戻る。 ここまで。 ●(Noの)パレット点灯 　パレット[No]の「box-shadow」に「0 0 2px 2px #FFCC66, 0 0 4px 4px #FFEE99, 0 0 8px 8px #FFFF99」をDOMスタイル設定。 ここまで。 ●パレット消灯 　（パレット数＋１）回 　　パレット[回数-1]の「box-shadow」に「なし」をDOMスタイル設定。 　ここまで。 ここまで。 ＃＃---パレットの色変更---------- 「パレット変更：」のラベル作成。 色選択ボタン＝パレットデータ[0]の色入力欄作成。 　色選択ボタンの「onchange」に「パレット変更」をDOMイベント設定。 ●パレット変更 　パレットデータ[ペンモード-1]＝色選択ボタンの「value」をDOM属性取得。 　描画色データ＝パレットデータ[ペンモード-1]で描画色データ作成。 　パレット[ペンモード]の「背景色」にパレットデータ[ペンモード-1]をDOMスタイル設定。 　描画データ書き換え。 ここまで。 「｜」のラベル作成。 ＃＃---グリッド--------- 枠ボタン＝「グリッド」のボタン作成 　枠ボタンをクリックした時には 　　もし、グリッドならば、グリッド＝オフ。 　　違えば、グリッド＝オン。 　　データ描画。 　ここまで。 改行作成。 ＃＃---クリア---------- クリアボタン＝「クリア」のボタン作成。 　クリアボタンをクリックした時には 　　「編集中の画像をクリアします。 本当にクリアしますか？」と二択。 　　もし、それがはいならば、 　　　　データ初期化処理。 　　　　データ描画。 　　ここまで。 　ここまで。 全クリアボタン＝「全クリア」のボタン作成。 パレット初期化ボタン＝「パレット初期化」のボタン作成。 　パレット初期化ボタンをクリックした時には、 　　「パレットを初期化します。 本当に初期化しますか？」と二択。 　　もし、それがはいならば、 　　　パレットデータは初期パレットを配列複製。 　　　パレット更新。 　　　描画データ書き換え。 　　ここまで。 　ここまで。 改行作成。 ＃＃---プレビュー---------- 「プレビュー：」のラベル作成。 プレビュー＝[ドット列数,ドット行数]のキャンバス作成。 　プレビューの「ボーダー」に「solid #DDDDDD 4px」をDOMスタイル設定。 　プレビューの「border-radius」に「4px」をDOMスタイル設定。 　プレビューの「マージン」に「4px 8px -8px 8px」をDOMスタイル設定。 「｜」のラベル作成。 ＃＃---セレクト---------- セレクト配列＝空配列。 枚数回。セレクト配列[回数-1]＝回数。ここまで。 編集画像選択＝セレクト配列のセレクトボックス作成。 　編集画像選択の「幅」に「80px」をDOMスタイル設定。 　編集画像選択の「onchange」に「編集画像変更」をDOMイベント設定。 ●編集画像変更 　自動保存。 　編集中ドット絵＝編集画像選択の「value」をDOM属性取得。 　ドット絵データ＝保存用データ["ドット絵データ"][編集中ドット絵-1] 　描画データ書き換え。 ここまで。 ＃＃---画像追加---------- 画像追加ボタン＝「＋」のボタン作成。 改行作成。 ＃＃---テスト----------- テストボタン＝「アニメ」のボタン作成。 「｜」のラベル作成。 ＃＃---データ保存---------- 保存ボタン＝「画像保存」のボタン作成。 テキストボタン＝「テキスト保存」のボタン作成。 　テキストボタンをクリックした時には 　　テキスト＝「パレットデータ＝{パレットデータをJSONエンコード}{改行}」 　　枚数回 　　　テキストはテキストに「ドット絵_{回数}＝」を追加。 　　　保存用データ["ドット絵データ"][回数-1]をJSONエンコードして、「],」を「],」&改行に置換して、「[[」を「[{改行}[」に置換。 　　　テキストはそれをテキストに一行追加。 　　ここまで。 　　テキストをクリップボード設定。 　　テキストはテキストの０に「以下の内容でクリップボードにコピーしました。{改行}{改行}」を文字挿入。 　　テキストを言う。 　ここまで。 改行作成。 ＃＃---読み込み---------- パレット読込ボタン＝「パレット読込み」のボタン作成。 ドット絵読込ボタン＝「ドット絵読込み」のボタン作成。 　ドット絵読込ボタンをクリックした時には、 　　「ドット絵データ」を尋ねる。 　　ドット絵データはそれをJSONデコード。 　　描画データ書き換え。 　ここまで。 改行作成。 ＃＃---読み込み---------- 確認ボタン＝「APNG保存」のボタン作成。 改行作成。 ＃＃---保存用キャンバス---------- 保存用キャンバス＝[ドット列数*枚数,ドット行数]のキャンバス作成。 　保存用キャンバスをオフに可視設定。//オンにすれば繋がった画像を確認出来る。 　保存用キャンバスの「ボーダー」に「solid #DDDDDD 2px」をDOMスタイル設定。 　保存用キャンバス書き換え。 　編集中ドット絵＝1。 　ドット絵データ＝保存用データ["ドット絵データ"][編集中ドット絵-1] 　 ●保存用キャンバス書き換え 　枚数回 　　編集中ドット絵＝回数。 　　ドット絵データ＝保存用データ["ドット絵データ"][編集中ドット絵-1] 　　描画データ書き換え。 　ここまで。 ここまで。 改行作成。 ＃-----UIイベント設定---------- //イベント内で他のUIを操作する時は、関数でも作成した後に書かないとダメ。 ＃＃透明パレットについて パレット[0]をクリックした時には 　　ペンモード＝０。 　　描画色データは[0,0,0,0] 　　パレット消灯。0のパレット点灯。 　　色選択ボタンの「value」に「#F0F0F0」をDOM属性設定。 　　色選択ボタンをオンに無効化設定。 ここまで。 ＃＃保存ボタンについて（画像保存） 保存ボタンをクリックした時には 　もし、画像保存形式＝0ならば、 　　プレビューへ描画開始。 　違えば、もし、画像保存形式＝1ならば、 　　保存用キャンバスへ描画開始。 　ここまで。 　　描画ダウンロード 　　ドット絵エディタへ描画開始。 ここまで。 ＃＃画像追加ボタンについて 画像追加ボタンをクリックした時には 　自動保存。 　枚数＝枚数＋１。 　編集中ドット絵＝枚数。 　編集画像選択に枚数をセレクトアイテム追加。 　保存用データ["ドット絵データ"][枚数-1]＝ドット絵データを配列複製。 　ドット絵データ＝保存用データ["ドット絵データ"][枚数-1] 　データ初期化処理。 　描画データ書き換え。 　保存用キャンバスを[ドット列数*枚数,ドット行数]にキャンバスサイズ設定。 　保存用キャンバス書き換え。 ここまで。 ＃＃パレット読込ボタンについて パレット読込ボタンをクリックした時には、 　　「パレットデータ」を尋ねる。 　　パレットデータはそれをJSONデコード。 　　パレット更新。 　　描画データ書き換え。 　　保存用キャンバス書き換え。 ここまで。 　 ＃＃全クリアボタンについて 全クリアボタンをクリックした時には 　　「全ての画像をクリアします。 本当にクリアしますか？」と二択。 　　もし、それがはいならば、 　　　　全データ初期化処理。 　　　　データ描画。 　　　　保存用キャンバスへ描画開始。 　　　　全描画クリア。 　　　　ドット絵エディタへ描画開始。 　　ここまで。 ここまで。 ＃＃テストボタンについて（アニメ） テストカウンタ＝0。 テストボタンをクリックした時には 　テストカウンタ＝0。 　プレビューへ描画開始。 　１秒毎には 　　　全描画クリア。 　　　C=テストカウンタ%枚数。 　　　保存用キャンバスの[C*ドット列数,0,ドット列数,ドット列数]を[0,0,ドット列数,ドット列数]に画像部分描画。 　　　テストカウンタ=テストカウンタ+1。 　　　もし、テストカウンタ＞枚数*3ならば、 　　　　全タイマー停止。全描画クリア。 　　　　保存用キャンバスの[(編集中ドット絵-1)*ドット列数,0,ドット列数,ドット列数]を[0,0,ドット列数,ドット列数]に画像部分描画。 　　　　ドット絵エディタへ描画開始。 　　　ここまで。 　ここまで。 ここまで。 ＃＃確認ボタンについて（APNG形式ダウンロード） ＃支援関数 ●(callbackにcanvasから)キャンバスBLOB取得時 　『(function(c,callback){c.toBlob(callback,"image/png")})』を[canvas,callback]でJS関数実行 ここまで ●(callbackにblobをtypeで)BLOB読込時 『(function(blob,type,callback){ const fr=new FileReader(); fr.onload=()=>{ callback(fr.result); fr.onload=null; } if (type==='DataURL'){ fr.readAsDataURL(blob); }else if (type==='ArrayBuffer'){ fr.readAsArrayBuffer(blob); }else{ throw new Error('invalid type'); } })』を[blob,type,callback]でJS関数実行 ここまで ●(bufをtypeでnameに)バッファダウンロード 『(function(buf,type,name){ const link = document.createElement('a'); link.download = name; const blob = new Blob([buf], {type: type}); link.href = URL.createObjectURL(blob); link.click(); URL.revokeObjectURL(link.href); })』を[buf,type,name]でJS関数実行 ここまで 確認カウンタは０ 確認画像リストは[] 確認ボタンをクリックした時には 　　確認カウンタは０ 　　確認画像リストは[] 　　プレビューへ描画開始。 　　確認画像切替処理 ここまで ●確認画像切替処理 　　　全描画クリア。 　　　C=確認カウンタ。 　　　保存用キャンバスの[C*ドット列数,0,ドット列数,ドット列数]を[0,0,ドット列数,ドット列数]に画像部分描画。 　　　描画中キャンバスからキャンバスBLOB取得時には(blob) 　　　　　　blobを"ArrayBuffer"でBLOB読込時には(ar) 　　　　　　　　arを確認画像追加処理 　　　　　　　　確認カウンタは確認カウンタ＋１ 　　　　　　　　もし、確認カウンタ＜枚数ならば、 　　　　　　　　　　確認画像切替処理 　　　　　　　　違えば 　　　　　　　　　　確認画像一括処理 　　　　　　　　　　ドット絵エディタへ描画開始。 　　　　　　　　ここまで 　　　　　　ここまで 　　　ここまで ここまで ●(bufを)確認画像追加処理 　　PはbufからPNG読込 　　確認画像リストにPを配列追加 ここまで ●確認画像一括処理 　　最終画像はPNG作成 　　初回画像はオン 　　acTL退避＝「」 　　IHDR退避＝「」 　　連番は０ 　　確認画像リストを反復する 　　　　ココ＝それ 　　　　IDAT遭遇はオフ 　　　　もし、初回画像ならば 　　　　　　(ココからPNGチャンク配列取得)を反復する 　　　　　　　　キキ＝それ 　　　　　　　　もし、キキ["chunkType"]＝"IHDR"ならば、 　　　　　　　　　　最終画像にキキをPNGチャンク追加 　　　　　　　　　　IHDR退避＝キキ 　　　　　　　　違えばもし、キキ["chunkType"]＝"gAMA"ならば、 　　　　　　　　　　最終画像にキキをPNGチャンク追加 　　　　　　　　違えばもし、キキ["chunkType"]＝"sRGB"ならば、 　　　　　　　　　　最終画像にキキをPNGチャンク追加 　　　　　　　　違えばもし、キキ["chunkType"]＝"PLTE"ならば、 　　　　　　　　　　最終画像にキキをPNGチャンク追加 　　　　　　　　違えばもし、キキ["chunkType"]＝"sTRN"ならば、 　　　　　　　　　　最終画像にキキをPNGチャンク追加 　　　　　　　　違えばもし、キキ["chunkType"]＝"IDAT"ならば、 　　　　　　　　　　もし、IDAT遭遇でなければ、 　　　　　　　　　　　　チャンク＝"acTL"のPNGチャンク作成 　　　　　　　　　　　　チャンク["num_frames"]＝確認画像リストの配列要素数 　　　　　　　　　　　　チャンク["num_plays"]＝0 　　　　　　　　　　　　acTL退避＝チャンク 　　　　　　　　　　　　最終画像にチャンクをPNGチャンク追加 　　　　　　　　　　　　チャンク＝"fcTL"のPNGチャンク作成 　　　　　　　　　　　　チャンク["sequence_number"]＝連番 　　　　　　　　　　　　チャンク["width"]＝IHDR退避["width"] 　　　　　　　　　　　　チャンク["height"]＝IHDR退避["height"] 　　　　　　　　　　　　チャンク["x_offset"]＝0 　　　　　　　　　　　　チャンク["y_offset"]＝0 　　　　　　　　　　　　チャンク["delay_num"]＝100 　　　　　　　　　　　　チャンク["delay_den"]＝100 　　　　　　　　　　　　チャンク["dispose_op"]＝0 　　　　　　　　　　　　チャンク["blend_op"]＝0 　　　　　　　　　　　　最終画像にチャンクをPNGチャンク追加 　　　　　　　　　　　　連番は連番＋１ 　　　　　　　　　　　　IDAT遭遇はオン 　　　　　　　　　　ここまで 　　　　　　　　　　最終画像にキキをPNGチャンク追加 　　　　　　　　ここまで 　　　　　　ここまで 　　　　　　初回画像はオフ 　　　　違えば、 　　　　　　(ココからPNGチャンク配列取得)を反復する 　　　　　　　　キキ＝それ 　　　　　　　　もし、キキ["chunkType"]＝"IDAT"ならば、 　　　　　　　　　　もし、IDAT遭遇でなければ、 　　　　　　　　　　　　チャンク＝"fcTL"のPNGチャンク作成 　　　　　　　　　　　　チャンク["sequence_number"]＝連番 　　　　　　　　　　　　チャンク["width"]＝IHDR退避["width"] 　　　　　　　　　　　　チャンク["height"]＝IHDR退避["height"] 　　　　　　　　　　　　チャンク["x_offset"]＝0 　　　　　　　　　　　　チャンク["y_offset"]＝0 　　　　　　　　　　　　チャンク["delay_num"]＝100 　　　　　　　　　　　　チャンク["delay_den"]＝100 　　　　　　　　　　　　チャンク["dispose_op"]＝0 　　　　　　　　　　　　チャンク["blend_op"]＝0 　　　　　　　　　　　　最終画像にチャンクをPNGチャンク追加 　　　　　　　　　　　　連番は連番＋１ 　　　　　　　　　　　　IDAT遭遇はオン 　　　　　　　　　　ここまで 　　　　　　　　　　チャンク＝"fdAT"のPNGチャンク作成 　　　　　　　　　　チャンク["sequence_number"]＝連番 　　　　　　　　　　チャンク["imageRaw"]＝キキ["chunkRaw"] 　　　　　　　　　　最終画像にチャンクをPNGチャンク追加 　　　　　　　　　　連番は連番＋１ 　　　　　　　　ここまで 　　　　　　ここまで 　　　　ここまで 　　ここまで 　　チャンク＝"IEND"のPNGチャンク作成 　　最終画像にチャンクをPNGチャンク追加 　　最終画像からPNG取出を"image/png"で"image.png"にバッファダウンロード ここまで ●(Noで)描画色変更 　ペンモード＝No。 　描画色データ＝パレットデータ[No-1]で描画色データ作成。 　パレット消灯。Noのパレット点灯。 　色選択ボタンをオフに無効化設定。 　色選択ボタンの「value」にパレットデータ[No-1]をDOM属性設定。 ここまで。 ＃-----マウスイベント設定---------- //ナデシコするの後で設定しないと無効になるみたい？ ドット絵エディタのマウス押した時には 　　マウスフラグ＝オン 　　X=INT(マウスX÷ドット幅)。 　　Y=INT(マウスY÷ドット幅)。 　　もし、X>ドット列数-1ならば、戻る。//右端ではみ出るの防止 　　もし、Y>ドット行数-1ならば、戻る。//下端ではみ出るの防止 　　ドット絵データ[Y][X]＝ペンモード。 　　４回。 　　　描画データ[(Y*ドット列数+X)*4+(回数-1)]＝描画色データ[回数-1]。 　　ここまで。 　　データ描画。 ここまで。 ドット絵エディタのマウス離した時には 　　マウスフラグオフ。 ここまで。 ドット絵エディタの「onmouseout」に「マウスフラグオフ」をDOMイベント設定。//外に出た時 ドット絵エディタのマウス移動した時には 　　もし、マウスフラグ＝オフならば、戻る。 　　X=INT(マウスX÷ドット幅) 　　Y=INT(マウスY÷ドット幅) 　　もし、X>ドット列数-1ならば、戻る。//右端ではみ出るの防止 　　もし、Y>ドット行数-1ならば、戻る。//下端ではみ出るの防止 　　ドット絵データ[Y][X]＝ペンモード。 　　４回。 　　　描画データ[(Y*ドット列数+X)*4+(回数-1)]＝描画色データ[回数-1]。 　　ここまで。 　　データ描画。 ここまで。 ●マウスフラグオフ 　マウスフラグ＝オフ。 ここまで。 ＃-----タッチイベント設定---------- ドット絵エディタのタッチ開始した時には(E) 　EのDOMイベント処理停止。 　　マウスフラグ＝オン 　　X=INT(タッチX÷ドット幅)。 　　Y=INT(タッチY÷ドット幅)。 　　もし、X>ドット列数-1ならば、戻る。//右端ではみ出るの防止 　　もし、Y>ドット行数-1ならば、戻る。//下端ではみ出るの防止 　　ドット絵データ[Y][X]＝ペンモード。 　　４回。 　　　描画データ[(Y*ドット列数+X)*4+(回数-1)]＝描画色データ[回数-1]。 　　ここまで。 　　データ描画。 ここまで。 ドット絵エディタをタッチした時には 　　もし、マウスフラグ＝オフならば、戻る。 　　X=INT(タッチX÷ドット幅) 　　Y=INT(タッチY÷ドット幅) 　　もし、X>ドット列数-1ならば、戻る。//右端ではみ出るの防止 　　もし、Y>ドット行数-1ならば、戻る。//下端ではみ出るの防止 　　ドット絵データ[Y][X]＝ペンモード。 　　４回。 　　　描画データ[(Y*ドット列数+X)*4+(回数-1)]＝描画色データ[回数-1]。 　　ここまで。 　　データ描画。 ここまで。 ドット絵エディタのタッチキャンセル時には 　　マウスフラグオフ。 ここまで ＃-----開始---------- 描画データ書き換え。 ＃-----関数----------- ●データ描画とは 　1に線太設定。 　(ドット列数*ドット行数)回 　　　No=回数-1。A＝描画データ[No*4+3]。 　　　XX＝No%ドット列数。 　　　YY＝(No/ドット列数)を切捨て。 　　　もし、A＝０ならば、 　　　　白色に塗り色設定。 　　　　もし、グリッド＝オンならば、グリッド色に線色設定。 　　　　[XX*ドット幅,YY*ドット幅,ドット幅,ドット幅]に四角描画。 　　　　「#F0F0F0」に塗り色設定。空に線色設定。 　　　　[XX*ドット幅,YY*ドット幅+ドット幅/2,ドット幅/2,ドット幅/2]に四角描画。 　　　　[XX*ドット幅+ドット幅/2,YY*ドット幅,ドット幅/2,ドット幅/2]に四角描画。 　　　違えば、 　　　　RGB値＝空配列。 　　　　３回。RGB値[回数-1]＝描画データ[No*4+(回数-1)]。ここまで。 　　　　RGB値はRGB値を「,」で配列結合。 　　　　「rgba({RGB値})」に塗り色設定。 　　　　もし、グリッド＝オンならば、グリッド色に線色設定。 　　　　違えば、空に線色設定。 　　　　[XX*ドット幅,YY*ドット幅,ドット幅,ドット幅]に四角描画。 　　　ここまで 　ここまで。 　自動保存。 　プレビューへ描画開始。 　[0,0,ドット列数,ドット行数]に描画データで描画処理反映。 　保存用キャンバスへ描画開始。 　[ドット列数*(編集中ドット絵-1),0,ドット列数,ドット行数]に描画データで描画処理反映。 　ドット絵エディタへ描画開始。 ここまで。 ●描画データ書き換え 　(ドット列数*ドット行数)回 　　No=回数-1。 　　X＝No%ドット列数。 　　Y＝(No/ドット列数)を切捨て。 　　もし、ドット絵データ[Y][X]＝0ならば、色データは[0,0,0,0] 　　違えば、色データは、パレットデータ[ドット絵データ[Y][X]-1]で描画色データ作成。 　　４回。 　　　　描画データ[No*4+回数-1]＝色データ[回数-1]。 　　ここまで。 　ここまで。 　データ描画。 ここまで。 ●パレット更新 　　(パレットデータの要素数)回 　　　　パレット[回数]の「背景色」にパレットデータ[回数-1]をDOMスタイル設定。 　　ここまで。 　　色選択ボタンの「value」にパレットデータ[ペンモード-1]をDOM属性設定。 　　描画色データ＝パレットデータ[ペンモード-1]で描画色データ作成。 ここまで。 ●自動保存 　保存用データ["パレットデータ"]＝パレットデータ。 　保存用データ["ドット絵データ"][編集中ドット絵-1]＝ドット絵データ。 　保存用データを「ドット絵エディタ自動保存データ」に保存。 ここまで。 ●全データ初期化処理 　　データ初期化処理。 　　保存用データ["ドット絵データ"]＝空配列。 　　保存用データ["ドット絵データ"][0]＝ドット絵データを配列複製。 　　枚数＝1。編集中ドット絵＝1。 　　編集画像選択に[1]をセレクトアイテム再設定。 　　保存用キャンバスを[ドット列数,ドット行数]にキャンバスサイズ設定。 ここまで。 ＃-----汎用関数------------------------------------------ //「#RRGGBB」→[R,G,B] // HTMLの16進カラーコード(#RRGGBB)を256色の配列[R,G,B]に分解。 ●(色を|色の)RGB分解 　分色とは変数。分色＝空配列。 　色＝色の「#」を「0x」に置換。 　色＝色を整数変換。 　数を２から０まで繰り返す 　　分色[数]＝色%256。 　　色＝(色-分色[数])/256 　ここまで。 　分色で戻る。 ここまで。 ●(xywhを色データで|xywhに)描画処理反映 「(function (color){波カッコ} const img = sys.__ctx.getImageData({xywh[0]}, {xywh[1]}, {xywh[2]},{xywh[3]}); let data = img.data; for (let i=0; i<data.length;i++){波カッコ}data[i]=color[i]{波カッコ閉じ} sys.__ctx.putImageData(img,{xywh[0]}, {xywh[1]}); {波カッコ閉じ})」を[色データ]でJS関数実行。 ここまで。 #----------------------------------------------- //valueに設定出来るのは「#RRGGBB」形式のみ。省略は黒色。 ●(色の)色入力欄作成 　　IDとは変数＝「nadesi-dom-{DOM生成個数}」。 　　DOM生成個数＝DOM生成個数+1。 　　ELとは変数＝「input」のDOM要素作成。 　　ELの「type」に「color」をDOM属性設定。 　　ELの「value」に色をDOM属性設定。 　　ELの「id」にIDをDOM属性設定。 　　DOM親要素へELをDOM子要素追加。 　　ELで戻る。 ここまで。 ●(WHで|WHの)キャンバス作成 　　Wとは変数＝WH[0]。Hとは変数＝WH[1]。 　　IDとは変数＝「nadesi-dom-{DOM生成個数}」。 　　DOM生成個数＝DOM生成個数+1。 　　ELとは変数＝「canvas」のDOM要素作成。 　　ELの「width」にWをDOM属性設定。　　　//属性設定の時は、和スタイルが使えない。 　　ELの「height」にHをDOM属性設定。 　　ELの「幅」に「{W}px」をDOMスタイル設定。 　　ELの「高さ」に「{H}px」をDOMスタイル設定。 　　ELの「id」にIDをDOM属性設定。 　　DOM親要素へELをDOM子要素追加。 　　ELで戻る。 ここまで。 //canvasは、属性とスタイルと、両方の幅と高さを合わせて設定しておかないと、なにかと変なことになるので気を付ける。 ●(canvasをWHに)キャンバスサイズ設定 　　Wとは変数＝WH[0]。Hとは変数＝WH[1]。 　　canvasの「width」にWをDOM属性設定。 　　canvasの「height」にHをDOM属性設定。 　　canvasの「幅」に「{W}px」をDOMスタイル設定。 　　canvasの「高さ」に「{H}px」をDOMスタイル設定。 ここまで。 #----------------------------------------------- ●(AにSを)セレクトアイテム追加 　　EL=「option」のDOM要素作成。 　　ELにSをテキスト設定。 　　ELの「value」にSをDOM属性設定。 　　ELの「selected」に「true」をDOM属性設定。 　　AへELをDOM子要素追加。 ここまで。 ●(Aの)セレクトアイテム全削除 　IDとは変数＝Aの「id」をDOM属性取得。ID=「#{ID}」 　OPTIONとは変数＝「{ID} option」のDOM要素全取得。 　OPTIONを反復 　　AにDOM親要素設定。 　　対象をDOM子要素削除。 　ここまで。 ここまで。 ●(AにOPTIONを)セレクトアイテム再設定 　Aのセレクトアイテム全削除。 　IDとは変数＝Aの「id」をDOM属性取得。 　(OPTIONの要素数)回 　　EL＝「option」をDOM要素作成。 　　ELにOPTION[回数-1]をテキスト設定。 　　ELの「value」にOPTION[回数-1]をDOM属性設定。 　　ELの「id」に「{ID}_{回数-1}」をDOM属性設定。 　　AにDOM親要素設定。 　　ELをDOM子要素追加。 　ここまで。 ここまで。 #----------------------------------------------- ●(DOMをAに)無効化設定 　　もし、A＝オンならば 　　　　DOMの「disabled」にオンをDOM属性設定。 　　違えば、 　　　　DOMの「disabled」にオフをDOM属性設定。 　　ここまで。 ここまで。 ●(DOMをAに)可視設定 　　もし、A=オンならば 　　　　DOMの「opacity」にオンをDOMスタイル設定。 　　違えば、 　　　　DOMの「opacity」にオフをDOMスタイル設定。 　　ここまで。 ここまで。 #----------------------------------------------- ●クライアント幅 　　「document.documentElement.clientWidth」をJS実行。 ここまで。 #-----------------------------------------------------------------------