JavaScript入門[HTML5編]描画面を回転させる

描画面を回転させる命令文

文字や画像を回転させる命令は以下のものです。

context.rotate(回転角度)

描画面を回転させます。回転角度はラジアンで指定。

前にも出てきたラジアンです。πが180°だったので、π/2が90°、 π/3が60°ということになります。

文字を回転させる

では、以下のスクリプトで、文字を45°回転させてみましょう。

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

  ctx.font = "normal 40px Arial";
  ctx.textBaseline = "bottom";

  ctx.fillStyle = "red";
  ctx.fillText("JavaScript",30,50);  //無回転で描画した場合

  ctx.rotate(Math.PI / 4);  //45度回転させる

  ctx.fillStyle = "blue";
  ctx.fillText("JavaScript",30,50);  //同じ条件で文字を描画
</script>

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

赤文字は回転前に描画、青文字は回転後に描画したものです。 回転後は文字の一部が枠外に出てしまいました。 これは、回転の起点がcanvasの左上になっているからです。 下のスクリプトでは文字の背景を付けたものです。今度は起点がはっきり分かると思います。

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

  ctx.font = "normal 40px Arial";
  ctx.textBaseline = "bottom";

  ctx.fillStyle = "red";
  ctx.fillText("JavaScript",30,50);
  ctx.fillStyle = "rgba(255,0,0,0.3)";
  ctx.fillRect(0,0,360,50);  //薄い赤の背景を付ける
  
  ctx.rotate(Math.PI / 4);

  ctx.fillStyle = "blue";
  ctx.fillText("JavaScript",30,50);
  ctx.fillStyle = "rgba(0,0,255,0.3)";
  ctx.fillRect(0,0,360,50);  //薄い青の背景を付ける
</script>

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

回転の起点がcanvasの左上だということが分かると思います。 描画範囲そのものが回転しているのです。 rotate()を使う時は、canvasからはみ出さないよう位置指定に気を付けましょう。