▶ 実 行
▶ 実行
クリア
ドット絵エディタ改の改の改の改
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)回 パレット[回数-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エンコードして、「],」を「],」&改行に置換して、「[[」を「[{改行}[」に置換。 テキストはそれをテキストに一行追加。 ここまで。 テキストをクリップボード設定。 テキストはテキストの0に「以下の内容でクリップボードにコピーしました。{改行}{改行}」を文字挿入。 テキストを言う。 ここまで。 改行作成。 ##---読み込み---------- パレット読込ボタン=「パレット読込み」のボタン作成。 ドット絵読込ボタン=「ドット絵読込み」のボタン作成。 ドット絵読込ボタンをクリックした時には、 「ドット絵データ」を尋ねる。 ドット絵データはそれをJSONデコード。 描画データ書き換え。 ここまで。 改行作成。 ##---読み込み---------- 確認ボタン=「APNG保存」のボタン作成。 改行作成。 ##---保存用キャンバス---------- 保存用キャンバス=[ドット列数*枚数,ドット行数]のキャンバス作成。 保存用キャンバスをオフに可視設定。//オンにすれば繋がった画像を確認出来る。 保存用キャンバスの「ボーダー」に「solid #DDDDDD 2px」をDOMスタイル設定。 保存用キャンバス書き換え。 編集中ドット絵=1。 ドット絵データ=保存用データ["ドット絵データ"][編集中ドット絵-1] ●保存用キャンバス書き換え 枚数回 編集中ドット絵=回数。 ドット絵データ=保存用データ["ドット絵データ"][編集中ドット絵-1] 描画データ書き換え。 ここまで。 ここまで。 改行作成。 #-----UIイベント設定---------- //イベント内で他のUIを操作する時は、関数でも作成した後に書かないとダメ。 ##透明パレットについて パレット[0]をクリックした時には ペンモード=0。 描画色データは[0,0,0,0] パレット消灯。0のパレット点灯。 色選択ボタンの「value」に「#F0F0F0」をDOM属性設定。 色選択ボタンをオンに無効化設定。 ここまで。 ##保存ボタンについて(画像保存) 保存ボタンをクリックした時には もし、画像保存形式=0ならば、 プレビューへ描画開始。 違えば、もし、画像保存形式=1ならば、 保存用キャンバスへ描画開始。 ここまで。 描画ダウンロード ドット絵エディタへ描画開始。 ここまで。 ##画像追加ボタンについて 画像追加ボタンをクリックした時には 自動保存。 枚数=枚数+1。 編集中ドット絵=枚数。 編集画像選択に枚数をセレクトアイテム追加。 保存用データ["ドット絵データ"][枚数-1]=ドット絵データを配列複製。 ドット絵データ=保存用データ["ドット絵データ"][枚数-1] データ初期化処理。 描画データ書き換え。 保存用キャンバスを[ドット列数*枚数,ドット行数]にキャンバスサイズ設定。 保存用キャンバス書き換え。 ここまで。 ##パレット読込ボタンについて パレット読込ボタンをクリックした時には、 「パレットデータ」を尋ねる。 パレットデータはそれをJSONデコード。 パレット更新。 描画データ書き換え。 保存用キャンバス書き換え。 ここまで。 ##全クリアボタンについて 全クリアボタンをクリックした時には 「全ての画像をクリアします。 本当にクリアしますか?」と二択。 もし、それがはいならば、 全データ初期化処理。 データ描画。 保存用キャンバスへ描画開始。 全描画クリア。 ドット絵エディタへ描画開始。 ここまで。 ここまで。 ##テストボタンについて(アニメ) テストカウンタ=0。 テストボタンをクリックした時には テストカウンタ=0。 プレビューへ描画開始。 1秒毎には 全描画クリア。 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関数実行 ここまで 確認カウンタは0 確認画像リストは[] 確認ボタンをクリックした時には 確認カウンタは0 確認画像リストは[] プレビューへ描画開始。 確認画像切替処理 ここまで ●確認画像切替処理 全描画クリア。 C=確認カウンタ。 保存用キャンバスの[C*ドット列数,0,ドット列数,ドット列数]を[0,0,ドット列数,ドット列数]に画像部分描画。 描画中キャンバスからキャンバスBLOB取得時には(blob) blobを"ArrayBuffer"でBLOB読込時には(ar) arを確認画像追加処理 確認カウンタは確認カウンタ+1 もし、確認カウンタ<枚数ならば、 確認画像切替処理 違えば 確認画像一括処理 ドット絵エディタへ描画開始。 ここまで ここまで ここまで ここまで ●(bufを)確認画像追加処理 PはbufからPNG読込 確認画像リストにPを配列追加 ここまで ●確認画像一括処理 最終画像はPNG作成 初回画像はオン acTL退避=「」 IHDR退避=「」 連番は0 確認画像リストを反復する ココ=それ 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チャンク追加 連番は連番+1 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チャンク追加 連番は連番+1 IDAT遭遇はオン ここまで チャンク="fdAT"のPNGチャンク作成 チャンク["sequence_number"]=連番 チャンク["imageRaw"]=キキ["chunkRaw"] 最終画像にチャンクをPNGチャンク追加 連番は連番+1 ここまで ここまで ここまで ここまで チャンク="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]=ペンモード。 4回。 描画データ[(Y*ドット列数+X)*4+(回数-1)]=描画色データ[回数-1]。 ここまで。 データ描画。 ここまで。 ドット絵エディタのマウス離した時には マウスフラグオフ。 ここまで。 ドット絵エディタの「onmouseout」に「マウスフラグオフ」をDOMイベント設定。//外に出た時 ドット絵エディタのマウス移動した時には もし、マウスフラグ=オフならば、戻る。 X=INT(マウスX÷ドット幅) Y=INT(マウスY÷ドット幅) もし、X>ドット列数-1ならば、戻る。//右端ではみ出るの防止 もし、Y>ドット行数-1ならば、戻る。//下端ではみ出るの防止 ドット絵データ[Y][X]=ペンモード。 4回。 描画データ[(Y*ドット列数+X)*4+(回数-1)]=描画色データ[回数-1]。 ここまで。 データ描画。 ここまで。 ●マウスフラグオフ マウスフラグ=オフ。 ここまで。 #-----タッチイベント設定---------- ドット絵エディタのタッチ開始した時には(E) EのDOMイベント処理停止。 マウスフラグ=オン X=INT(タッチX÷ドット幅)。 Y=INT(タッチY÷ドット幅)。 もし、X>ドット列数-1ならば、戻る。//右端ではみ出るの防止 もし、Y>ドット行数-1ならば、戻る。//下端ではみ出るの防止 ドット絵データ[Y][X]=ペンモード。 4回。 描画データ[(Y*ドット列数+X)*4+(回数-1)]=描画色データ[回数-1]。 ここまで。 データ描画。 ここまで。 ドット絵エディタをタッチした時には もし、マウスフラグ=オフならば、戻る。 X=INT(タッチX÷ドット幅) Y=INT(タッチY÷ドット幅) もし、X>ドット列数-1ならば、戻る。//右端ではみ出るの防止 もし、Y>ドット行数-1ならば、戻る。//下端ではみ出るの防止 ドット絵データ[Y][X]=ペンモード。 4回。 描画データ[(Y*ドット列数+X)*4+(回数-1)]=描画色データ[回数-1]。 ここまで。 データ描画。 ここまで。 ドット絵エディタのタッチキャンセル時には マウスフラグオフ。 ここまで #-----開始---------- 描画データ書き換え。 #-----関数----------- ●データ描画とは 1に線太設定。 (ドット列数*ドット行数)回 No=回数-1。A=描画データ[No*4+3]。 XX=No%ドット列数。 YY=(No/ドット列数)を切捨て。 もし、A=0ならば、 白色に塗り色設定。 もし、グリッド=オンならば、グリッド色に線色設定。 [XX*ドット幅,YY*ドット幅,ドット幅,ドット幅]に四角描画。 「#F0F0F0」に塗り色設定。空に線色設定。 [XX*ドット幅,YY*ドット幅+ドット幅/2,ドット幅/2,ドット幅/2]に四角描画。 [XX*ドット幅+ドット幅/2,YY*ドット幅,ドット幅/2,ドット幅/2]に四角描画。 違えば、 RGB値=空配列。 3回。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]で描画色データ作成。 4回。 描画データ[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」に置換。 色=色を整数変換。 数を2から0まで繰り返す 分色[数]=色%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実行。 ここまで。 #-----------------------------------------------------------------------