//変数 キャンバス幅=描画中キャンバスの「幅」をDOM属性取得 キャンバス高=描画中キャンバスの「高」をDOM属性取得 始点=[] 追加回数=1 //部品 追加ボタン=「　　　追加　　　」のボタン作成。改行作成 「つかいかた：キャンバスをドラッグで四角を描いて追加ボタンを押す」のラベル作成 改行作成 追加エリア＝空のテキストエリア作成 追加エリアの「幅」に「300px」をDOMスタイル設定 追加エリアの「高」に「20px」をDOMスタイル設定 改行作成 「　↓　追加ボタンで座標を追加」のラベル作成。　改行作成 「[描画リスト]　（範囲名・座標の手動編集可）」のラベル作成。　改行作成 描画リスト＝「」のテキストエリア作成。　改行作成 描画リストの「幅」に「500px」をDOMスタイル設定 描画リストの「高」に「160px」をDOMスタイル設定 キャンバスサイズ変更ボタン=「キャンバスサイズ変更」のボタン作成 //部品ここまで 描画リスト描画 　 ●描画リスト描画 　14に描画フォント設定 　cw=描画中キャンバスの「幅」をDOM属性取得 　ch=描画中キャンバスの「高」をDOM属性取得 　描画クリア 　RGB(240,240,250)に塗色設定 　[0,0,cw,ch]へ四角描画 　赤色に塗色設定 　[0+3,ch-3]へ「キャンバス {cw}x{ch}」を文字描画 　json=描画リストJSON 　jsonをJSONデコードして反復 　 空に塗色設定 　 対象へ四角描画 　 赤色に塗色設定 　 x,y,w,h=対象 　 対象キーを[x+3,y+h-3]へ文字描画 　ここまで ここまで //jsonを返す ●描画リストJSON 　list=描画リストのDOMテキスト取得してそれをトリム 　list=listの「]」を「],」に置換 　list=『{＠}』の『＠』をlistに単置換 　list=listの『],}』を『]}』に単置換　//最後 　listを戻す ここまで //イベント 描画中キャンバスのマウス押した時には 描画リスト描画() 始点=[マウスX,マウスY] ここまで 描画中キャンバスのマウス離した時には xywh=[INT(始点[0]),INT(始点[1]),INT(マウスX-始点[0]),INT(マウスY-始点[1])] 黄色に塗色設定 xywhに四角描画 追加エリアに「"枠{追加回数}":[{xywh}]」をテキスト設定 ここまで 追加ボタンをクリック時には txt=空 txt=txtに(描画リストのテキスト取得)を一行追加 txt=txtに(追加エリアのテキスト取得)を一行追加 txt=txtをトリム 描画リストへtxtをテキスト設定 描画リスト描画() 追加回数=追加回数+1 追加エリアに空をテキスト設定 ここまで キャンバスサイズ変更ボタンをクリック時には 　キャンバスサイズ変更尋 ここまで ●キャンバスサイズ変更尋 　cw=描画中キャンバスの「幅」をDOM属性取得 　ch=描画中キャンバスの「高」をDOM属性取得 　ans=「キャンバスの幅は？(現在：{cw})」と尋ねる 　もしansが空でなければcw=ans 　ans=「キャンバスの高さは？(現在：{ch})」と尋ねる 　もしansが空でなければch=ans 　[cw,ch]にキャンバスサイズ変更 ここまで ●(cwchに)キャンバスサイズ変更 　cw,ch = cwch 　描画中キャンバスの「幅」にcwをDOM属性設定 　描画中キャンバスの「高」にchをDOM属性設定 　描画リスト描画 ここまで