やっぱり。JavaScript！- Canvasあれこれ。

Transformations - Web API | MDN

Canvasでわかりにくいなーと思うところを記録しておきます。

save()、restore()　保存と復元

矩形、線の形状や色は設定すれば変更の命令があるまではその条件が引き継がれます。

また違う設定をすればそれがまた引き継がれることになります。でも最初の設定にもどしたい場合があり、その設定を戻す命令となるのがsave()とrestore()ということです。

まず戻したい設定についてsave()しておきます。そして戻したいタイミングでrestore()してやります。これで設定が呼び戻されて必要な処理がされます。

Canvasの状態を保存しておく - Canvasのサンプル - HTML5 JavaScript API入門

translate　移動

CanvasRenderingContext2D.translate() - Web APIs | MDN

基本は

translate(x, y)

x、yの座標に移動します。translate(x, y)としてやると今現在の座標からさらにx、yの座標を足した座標に移動します。

今現在の座標からの移動です。原点からの移動ではないので座標の位置確認をして相対的な位置を確認して使うことが必要です。

例えば

 ctx.fillRect(0,0,150,150);  
 
  ctx.translate(200, 200)

  ctx.fillRect(0,0,100,100); 

  ctx.translate(200, 200)

  ctx.fillRect(0,0,50,50); 

とすると

となります。

"translate(x,y)"で移動しますが、"fillRect(x,y,width,height)"でも座標(x,y)の指定ができるのでこの座標の指定があればさらに座標が移動します。

ctx.fillRect(0,0,150,150);

とあるものを

ctx.fillRect(10,20,150,150);

(10,20,150,150)

と変更してもると描画される四角はx軸に"10"軸に"20"移動します。

rotate　回転

原点での回転は

ctx.fillRect(30,30, 100, 100);
ctx.rotate((Math.PI/180)*25);
ctx.fillStyle = "#0095DD";
ctx.fillRect(30,30, 100, 100);

青色の四角"ctx.fillRect(30,30, 100, 100);"が回転しているのがわかると思います。

何も指定せずにrotate()すると原点を中心に回転します。四角が傾いて表示されます。四角画面に対して回転するイメージです。

これの四角を四角の中心で回転させたい場合は回転の中心の座標を四角の中心に持ってこないとできません。

そこで"translate"を使います。

ctx.fillRect(150, 30, 100, 100);　　　// 四角の描画
//　中心の座標　 x = x + 0.5 * 幅.   y = y + 0.5 * 高さ
//     x = 150 + 100/2   y = 30 + 100/2
ctx.translate(200, 80);　　　　　　 // 計算した座標に移動
ctx.rotate((Math.PI/180)*25);              // 回転
ctx.translate(-200, -80);                      // 中心座標を移動
// そのままの座標で表示してしまうと最初の表示とずれる
ctx.fillStyle = "#0095DD";
ctx.fillRect(150, 30, 100, 100);

これを実行すると

とうまく回転したように見えます。でも実際はそのまま"くるっと"回っているのではなくて座標の移動でそのまま回転しているように見えるだけということになります。