パネルの座標系について

• ★1パネルの大きさは100x100になります
• ★2panel.x, panel.yにそれぞれ150を代入することで，パネルの中心が(150,150)になるように移動します．
• この(150,150)は「画面の座標系」（画面左上を(0,0)とした座標系）です
• 「パネルの座標系」はパネルの左上が(0,0)になるような座標系です．
• パネルの中心が ( パネルの幅/2, パネルの高さ/2 ) になるような座標系と言い換えることもできます．
• パネルの左上は，画面の座標系でいうと(100,100)になります
• （panel.x-パネル幅/2,panel.y-パネル高さ/2)
• ★3のfillRectで赤い■を描いています．描かれる位置は，パネルの座標系で指定します．
• パネルの座標系で(10,20)が■の左上になるように描いています．
• パネルの座標系(10,20)は，この場合画面の座標系では(110,120)です（画面の座標系におけるパネルの左上の座標=(100,100)を加算）

panel=new Panel;
panel.resize(100,100);//大きさ指定★1
panel.x=150;//場所指定★2
panel.y=150;
//パネル全体を白で塗る
panel.fillStyle="white";
panel.fillRect(0,0,100,100);
//パネルに赤い■を描く
panel.fillStyle="red";
panel.fillRect(10,20,30,30);//★3

図1.panel.png

• パネルの座標系は，fillRect,fillCircle,copyなどの各メソッドで描画位置を指定するのに用いられます