そこで円を描く際には
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.
目次
プログラミング学習を体系的に進めたい人へ
独学で基礎を確認したあとに、質問できる環境や転職・副業向けの学習サポートも比べたい人は、プログラミングスクールの比較記事も参考にしてください。学習目的、料金、受講期間、サポート範囲を分けて見ると、自分に合う学び方を選びやすくなります。
