▶ 実 行
▶ 実行
クリア
ドット絵エディタ改の改の改の改
by てぃふと@うぇいく
#------------------------------------------------------------------- # ドット絵エディタ改の改の改 #------------------------------------------------------------------- !「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実行。 ここまで。 #-----------------------------------------------------------------------