レヤーでお絵かき 📖

教えてもらったレヤー作成をつかって、本格的なお絵かきソフトをつくりたい！！！　まだ開発中。

プログラム: (→大)
＃元のキャンバスは使わない 描画中キャンバスの「幅」に0をDOM属性設定。 描画中キャンバスの「高さ」に0をDOM属性設定。 ＃画像準備 画像URL１＝「https://n3s.nadesi.com/image.php?f=1.jpg」 画像１＝画像URL１を画像読み待つ。 画像幅＝画像１の「幅」をDOM属性取得。 画像高さ＝画像１の「高さ」をDOM属性取得。 画像URL２＝『https://n3s.nadesi.com/image.php?f=389.png』 画像２＝画像URL２を画像読み待つ。 記憶=[] ＃セレクトボックス作成 レヤー名一覧は「レヤー１,レヤー２」を「,」で区切る レヤー名一覧のセレクトボックス作成し、レヤーセレクトに代入。 レヤーセレクトの「size」に(レヤーセレクトの要素数)をDOM属性設定。 レヤーセレクトに{ 　　"size":"(レヤーセレクトの要素数)" 　　"position":　"relative",//相対位置への配置 　　"右":"{-250}px"　//メインキャンバスの幅だけ左に }をDOMスタイル一括設定 「＋」のボタン作成してレヤー追加ボタンに代入 レヤー追加ボタンをクリックした時には、 追加レヤー名＝０ 「レヤーに名前をつけてね。」と尋ねて追加レヤー名に代入。 レヤー名一覧のレヤー名一覧の要素数に追加レヤー名を配列挿入。 ＃ 追加レヤー名を表示 ＃ レヤー名一覧の要素数を表示 レヤー名一覧をレヤーセレクトにセレクトボックスアイテム設定。 ＃ レヤー名一覧を表示 レヤーセレクトの「size」に(レヤーセレクトの要素数)をDOM属性設定。 レヤー作成して、追加レヤー名に代入 ここまで ＃値指定バーで線太設定 [1,50,3]の値指定バー作成して線太に代入 ＃親ボックスの準備 母艦＝DOM親要素。#　nako3_div #　親ボックスのポジションを相対位置とし、幅と高さを設定　 親ボックス＝「div」のDOM部品作成。 親ボックスに{ 　　"position":"relative", 　　"幅":"{画像幅}px", 　　"高さ":"{画像高さ}px", }をDOMスタイル一括設定。 親ボックスにDOM親要素設定。 ●レヤー作成とは レヤー名＝[画像幅,画像高さ]のキャンバス作成。 レヤー名の「position」に「absolute」をDOMスタイル設定。 レヤー名で戻る ここまで ＃キャンバス作成 #　作成するキャンバスは全てポジションを絶対位置にする メインキャンバス＝[画像幅,画像高さ]のキャンバス作成。 メインキャンバスの「position」に「absolute」をDOMスタイル設定。 [0,0]へ画像１を画像描画。　 ＃操作用キャンバスでマウス位置の取得とガイドラインの表示 操作用キャンバス＝[画像幅,画像高さ]のキャンバス作成。 操作用キャンバスの「position」に「absolute」をDOMスタイル設定。 操作用キャンバスの「重なり」に「9999」をDOMスタイル設定。#　数が大きいほど上位 レヤー作成してサブキャンバスに代入 [30,50]へ画像２を画像描画。 ＃クリックセンサー フラグ＝オフ 操作用キャンバスをマウス押した時には 　　フラグ＝オン ここまで。 操作用キャンバスをマウス離した時には 　　フラグ＝オフ 　　記憶＝[0] ここまで。/*　ただし、レヤー内から外に出て「マウス離す」と、次から「移動した」だけで線が描かれてしまう、、、*/ ＃レヤー選択 操作用キャンバスのマウス移動した時には 線太のテキスト取得に線太設定 描画中コンテキスト["lineCap"]＝「round」 レヤーセレクトのテキスト取得してレヤー名に代入 もし、フラグがオンならば レヤー名で条件分岐 「レヤー１」ならば、 サブキャンバスの描画開始 記憶から[マウスX,マウスY]まで線描画 記憶＝[0] 記憶＝[マウスX,マウスY]。ここまで 「レヤー２」ならば、 メインキャンバスへ描画開始 記憶から[マウスX,マウスY]まで線描画 記憶＝[0] 記憶＝[マウスX,マウスY]。ここまで ここまで ここまで ここまで