まゆげジェネレーター＋ 📖

まゆげパラメータを変更することで手軽にまゆげを生成できます。合成する機能が付きました

プログラム: (→大)
！インデント構文 説明文=『## ★★★ まゆげジェネレーター ★★★ あなたのために、**まゆげを描きます** まゆげパラメータを変更することで手軽にまゆげを生成できます。 完成した画像はご自由に。 』をマークダウンHTML変換してラベル作成 それの「文字サイズ」に「18px」をDOMスタイル設定 //------------汎用関数 //domの変更中には　イベント ●変更中(funcでdomの) 　funcでdomの「input」がDOMイベント発火時 //曲線描画2([100,50],[50,50],[80,30,80,40]) //曲線を2本引き塗りつぶし、眉毛だと言い張る ●曲線描画2(始点,終点,コントロールポイント) 　描画中コンテキストの「beginPath」を[]でJSメソッド実行 　描画中コンテキストの「moveTo」を始点でJSメソッド実行 　描画中コンテキストの「quadraticCurveTo」を[コントロールポイント[0],コントロールポイント[1],終点[0],終点[1]]でJSメソッド実行 　描画中コンテキストの「quadraticCurveTo」を[コントロールポイント[2],コントロールポイント[3],始点[0],始点[1]]でJSメソッド実行 　描画中コンテキストの「fill」を[]でJSメソッド実行 　描画中コンテキストの「stroke」を[]でJSメソッド実行 //------------ キャンバスサイズ=[300,300] 「キャンバスサイズ変更：」のラベル作成 キャンバスサイズUI=キャンバスサイズ[0]のエディタ作成 改行作成 眉毛キャンバス=キャンバスサイズのキャンバス作成　//まゆげのみ（非表示） それ.非表示はオン 眉毛適用後キャンバス=キャンバスサイズのキャンバス作成　//背景＋まゆげ それ.ボーダーは「1px solid」 改行作成 キャンバスサイズUIの変更した時には 　　w=対象からテキスト取得+0 　　キャンバスサイズ=[w,w] 　　眉毛キャンバス.幅=w 　　眉毛キャンバス.幅属性=w 　　眉毛キャンバス.高=w 　　眉毛キャンバス.高属性=w 　　眉毛適用後キャンバス.幅=w 　　眉毛適用後キャンバス.幅属性=w 　　眉毛適用後キャンバス.高=w 　　眉毛適用後キャンバス.高属性=w 　　 　　再描画 　　 眉={ "線太"：1, "線色"："#000000", "塗色"："#000000", "透過"：255, //アルファ値 "眉間":20, //中央からの距離 "眉幅":80, //長さ "眉尻":0,　//終点Y　-:たれ　+:ツリ（Y座標） "割合":30,　//山の位置（左右） "眉高":10,　//山の高さ（上下） "眉太":8,　//太さ　 "拡大":100, "顔向":0, "回転":0, "始点":[0,0], "終点":[0,0], "CP":[0,0] } //色 線色UI=色選択ボックス作成 線色UIの変更中には 　眉.線色=対象のテキスト取得 　再描画 塗色UI=色選択ボックス作成 塗色UIの変更中には 　眉.塗色=対象のテキスト取得 　再描画 透過UI=[0,255,255]の値指定バー作成 透過UIの変更中には 　眉.透過=対象のテキスト取得 　再描画 「（線色・塗色・透過）」のラベル作成 改行作成 //位置　 眉間UI=[0,100,眉.眉間]の値指定バー作成 眉間UIの変更中には 　眉.眉間=対象のテキスト取得+0 　再描画 眉幅UI=[10,キャンバスサイズ[0],眉.眉幅]の値指定バー作成 眉幅UIの変更中には 　眉.眉幅=対象のテキスト取得+0 　再描画 眉尻UI=[-40,40,眉.眉尻]の値指定バー作成 眉尻UIの変更中には 　眉.眉尻=対象のテキスト取得+0 　再描画 「（眉間・眉幅・眉尻）」のラベル作成 改行作成 //山 眉割合UI=[0,100,眉.割合]の値指定バー作成 眉割合UIの変更中には 　眉.割合=対象のテキスト取得+0 　再描画 眉高UI=[-40,40,眉.眉高]の値指定バー作成 眉高UIの変更中には 　眉.眉高=対象のテキスト取得+0 　再描画 眉太UI=[-40,40,眉.眉太]の値指定バー作成 眉太UIの変更中には 　眉.眉太=対象のテキスト取得+0 　再描画 「（山位置・高さ・太さ）」のラベル作成 改行作成 //拡大・回転 眉拡大UI=[0,400,眉.拡大]の値指定バー作成 眉拡大UIの変更中には 　眉.拡大=対象のテキスト取得+0 　再描画 眉顔向UI=[-100,100,眉.顔向]の値指定バー作成 眉顔向UIの変更中には 　眉.顔向=対象のテキスト取得+0 　再描画 回転UI=[-360,360,0]の値指定バー作成 回転UIの変更中には 　眉.回転=対象のテキスト取得+0 　再描画 「（拡大・顔向・回転）」のラベル作成 改行作成 デバッグラベル=「」のラベル作成 改行作成 ●再描画 　変数　m=眉 　 　//まゆげ（非表示） 　眉毛キャンバスへ描画開始 　全描画クリア 　キャンバス状態保存 　1回 　　　 　　　m.線色に線色設定 　　　m.塗色に塗色設定 　　　m.線太に線太さ設定 　　　もしm.透過<255ならば 　　　　　//#rrggbbaa 　　　　　alfa=HEX(m.透過)を2でゼロ埋め 　　　　　m.線色&alfaに線色設定 　　　　　m.塗色&alfaに塗色設定 　　　 　　　 　　　//[描画中キャンバス.幅/2,描画中キャンバス.高/2]へ描画起点設定 　　　描画起点=[キャンバスサイズ[0]/2,キャンバスサイズ[1]/2] 　　　描画起点へ描画起点設定 　　　m.回転へ描画回転 　　　 　　　//右 　　　m["始点",0]=m.眉間 //x 　　　m["始点",1]=0 //y 　　　m["終点",0]=m["始点",0]+m.眉幅 //x 　　　m["終点",1]=m.眉尻 //y 　　　m["CP",0]=m["始点",0]+(m["終点",0]-m["始点",0])*m.割合/100 //曲線1 　　　m["CP",1]=m["始点",1]-m.眉高 　　　m["CP",2]=m["始点",0]+(m["終点",0]-m["始点",0])*m.割合/100 //曲線2 　　　m["CP",3]=m["始点",1]-m.眉高-m.眉太 // 　　　キャンバス状態保存 　　　[m.拡大/100,0,0,m.拡大/100,0,0]だけ描画変換マトリクス追加 　　　もしm.顔向>0ならば 　　　　　[1-m.顔向/100,0,0,1-m.顔向/100/2,0,0]だけ描画変換マトリクス追加//伸縮x,傾斜y,傾斜x,伸縮y,起点x,起点y 　　　曲線描画2(m.始点,m.終点,m.CP) 　　　キャンバス状態復元 　　　 　　　//左 　　　キャンバス状態保存 　　　[m.拡大/100,0,0,m.拡大/100,0,0]だけ描画変換マトリクス追加 　　　もしm.顔向<0ならば 　　　　　[1+m.顔向/100,0,0,1+m.顔向/100/2,0,0]だけ描画変換マトリクス追加 　　　[-1,0,0,1,0,0]だけ描画変換マトリクス追加//伸縮xを反転 　　　曲線描画2(m.始点,m.終点,m.CP) 　　　キャンバス状態復元 　キャンバス状態復元 　 　//背景一部+まゆげ 　眉毛適用後キャンバスへ描画開始 　全描画クリア 　合成元取得 　眉毛キャンバスの[0,0]を[0,0]へ画像部分描画 　 　//背景全部+まゆげ 　眉毛合成 　 　mをJSONエンコードしてデバッグラベルにテキスト設定 　 　mを戻す //------追加部分----------- !「https://n3s.nadesi.com/plain/nadesiko3-FileReader.js」を取り込む。 //ファイル選択作成 //ファイル選択した時 //ファイルドロップした時 //画像ファイル開いた時 『*** ### ★★★　まゆげ合成エリア　★★★ ここではお手持ちの絵にまゆげを合成することができます。 1. ファイル選択またはドロップで画像をロード 2. マウスクリックでまゆげの位置を指定 ※ 画像がネットにアップロードされることはありません。ブラウザ内で処理されます。 』をマークダウンHTML変換してラベル作成 変数　合成元画像=空//img要素 変数　合成先座標=[150,100] 改行作成 合成元指定UI=ファイル選択作成 改行作成 合成元キャンバス=[300,300]のキャンバス作成 それ.ボーダーは「1px solid」 16に描画フォント設定 [10,50]に「ここに画像ファイルをドロップ」を文字描画 //合成元の座標指定 合成元キャンバスのマウス押した時には 　　もし押したボタンが「左」ならば 　　　　合成先座標[0]=マウスX 　　　　合成先座標[1]=マウスY 　　　　 　　　　再描画 //合成元キャンバス 眉毛適用後キャンバスのマウス押した時には 　　合成先座標[0]=合成先座標[0]-キャンバスサイズ[0]/2+マウスX 　　合成先座標[1]=合成先座標[1]-キャンバスサイズ[1]/2+マウスY 　　再描画 //ロード 合成元指定UIのファイル選択した時には 　　対象[0]を合成元ロード 合成元指定UIにファイルドロップ時には 　　対象[0]を合成元ロード 合成元キャンバスにファイルドロップした時には 　　合成元指定UIの「files」に対象をDOM属性設定 　　対象[0]を合成元ロード 　　 ●合成元ロード(fileを) 　fileの画像ファイル開いた時には 　　　合成元画像 = 対象 　　　合成元キャンバス.幅は対象.幅属性 　　　合成元キャンバス.幅属性は対象.幅属性 　　　合成元キャンバス.高は対象.高属性 　　　合成元キャンバス.高属性は対象.高属性 　　　合成元キャンバス.ボーダーは空 　　　再描画 //合成 ●眉毛合成 　もし合成元画像が空ならば、戻る 　 　合成元キャンバスへ描画開始 　全描画クリア 　合成元画像の[0,0]を[0,0]に画像部分描画 　眉毛キャンバスの[0,0]を[合成先座標[0]-キャンバスサイズ[0]/2,合成先座標[1]-キャンバスサイズ[1]/2]へ画像部分描画 　 //まゆげの背景 ●合成元取得 　もし合成元画像が空ならば、戻る 　眉毛適用後キャンバスへ描画開始 　w=キャンバスサイズ[0] 　h=キャンバスサイズ[1] 　合成元画像の[合成先座標[0]-w/2,合成先座標[1]-w/2,w,h]を[0,0,w,h]に画像部分描画 　 //保存 改行作成 保存ボタン＝「保存」のボタン作成。 保存ボタンをクリックした時には 　　もし合成元画像が空ならば、戻る 　　合成元キャンバスへ描画開始 　　描画ダウンロード 再描画