この記事の主題は「canvasのtranslateで座標の中心を移動させることができる」というこです。
★例えば
描画領域の左上の座標は(0,0)となっているので、円を描くときに(0,0)を中心に円を描いてしまうと下図のようにおおかしなことになってしまう。・・・①
そこで円を描く際には
ctx.arc(100,100,30,0, 2*Math.PI);
のようにして、arcの第1第2引数に円の中心となる座標を指定するときに0,0じゃなくて100,100の様に指定することで、描画領域の右へ100、下へ100行ったところを中心に円を描くようにする。・・・②
ここまでが前回でやったこと。
今回はtranslate()関数の扱い方が主題なので、translateをどう記述するか、それによって描画がどうなるかを説明します。
ctx.translate(200,50);
とやれば、コンテキストの座標が右へ200、下へ50いったところが座標の(0,0)になる。
（つまり今まで左上隅だった点の座標は(-200,-50)になる。）
そのあとに、同じようにarcの第1第2引数に(0,0)を指定して円を描画すると、以下のようになります。座標軸が移動してるので、その0,0を中心に円が描画されています。
ソースは以下のとおり。上で示した通り①②③の3つ円を描いたものが、それぞれ左から順番に①②③の円となっています。
See the Pen
canvas-translate by pghappy (@pghappy)
on CodePen.
