JavaScript入門[HTML5編]描画面を移動させる

描画面を移動させる命令文

前のページではsetTransform()の最初の４つの引数を見てきましたが、 5番目と6番目の引数は描画面を移動させる時に指定します。 それと、もう一つ別の命令を見てみましょう。

context.setTransform(m11,m12,m21,m22,dx,dy)

第５引数，第６引数で指定した分だけ描画面を移動します。

context.translate(dx,dy)

指定しただけ描画面の起点（左上の点）を移動します。

この二つは同じ効果があります。 描画面の移動だけでなく変形も必要ならsetTransform()を、 描画面の移動だけならtranslate()を使うといいでしょう。

描画面を移動させるサンプル

まずはtranslate()を使って、単純に描画面を移動させるサンプルを見ておきましょう。

<canvas id="cv1" width="360" height="240"></canvas>
<script>
  var ctx = document.getElementById("cv1").getContext("2d");

  ctx.translate(100,50);     //描画面を横100px，縦50px移動させる
  ctx.fillStyle = "green";
  ctx.fillRect(0,0,180,90);  //座標(0,0)に小さい矩形を描いてみる
</script>

＜描画結果＞canvasタグにはCSSで二重線の枠を付けています

上記のサンプルではtranslate()で横100px、縦50px、起点を移動させています。 その後、座標(0,0)に矩形を描くようにしました。 矩形の左上の位置が(100,50)に移動しています。 これは描画面の起点がその位置に移動したからです。

描画面の回転と移動の指定

描画面を回転させる場合、その起点は(0,0)つまり左上でした。 このままでは90°以上回転させるとcanvasからはみ出してしまうことになります。 それで描画面の起点を移動させると、rotate()が使い易くなります。 以下のサンプルをご覧になってみてください。

<canvas id="cv2" width="360" height="240"></canvas>
<script>
  var ctx = document.getElementById("cv2").getContext("2d");

  ctx.setTransform(1,0,0,1,180,120); //起点をcanvas中心に移動
  ctx.fillStyle ="rgba(255,0,255,0.3)";

  //描画面を45度ずつ回転させながら円を描く
  for( var i = 0 ; i < 8 ; i++ )
  {
    ctx.beginPath();
    ctx.arc(0,60,60,0,Math.PI*2,true);
    ctx.fill();
    ctx.rotate(Math.PI/4);
  }
</script>

＜描画結果＞canvasタグにはCSSで二重線の枠を付けています

上のサンプルでは、描画面の起点をcanvas中心に移動させています。 これで描画面を回転させれば、360°canvasを利用できます。 for文を使って45°（Math.PI/4）ずつ回転させながら円を描いてみました。