canvasの描画面を移動させる方法について

HOME
更新日:2013.12.12
HOMEJavaScript入門(HTML5編) > 描画面を移動させる

描画面を移動させる-JavaScript入門(HTML5編)

前のページでは描画面を回転変形させる方法を見てきました。 このページでは描画面を移動する方法について見ていきたいと思います。 描画面を回転させる時に、起点を移動させれば扱いやすくなります。

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

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

context.setTransform(m11,m12,m21,m22,dx,dy)
第5引数,第6引数で指定した分だけ描画面を移動します。
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)ずつ回転させながら円を描いてみました。