JavaScript入門[HTML5編]描画面を変形させる

描画面を変形させるsetTransform()

まずは描画面を変形させるsetTransform()について見ておきましょう。

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

描画面を変形させます。引数が６つあります。

m11　描画面を横に伸縮させます。デフォルト値は1。

m12　canvas右側を傾かせます。デフォルト値は0。

m21　canvas下側を傾かせます。デフォルト値は0。

m22　描画面を縦に伸縮させます。デフォルト値は1。

dx,dy　描画面を移動させます。デフォルト値は0。

setTransform()は、繰り返し指定しても前の状態は引き継がれません。 つまり横幅を半分に指定し、その後2倍に指定しても、元のサイズに戻る訳ではありません。 最後に指定した状態が反映されます。

描画面を変形した後に元に戻すには、以下のようにデフォルト値を指定すればOKです。

context.setTransform( 1, 0, 0, 1, 0, 0 );

描画面を横に伸縮させる

最初に、setTransform()の第１引数を変えてみたいと思います。 第１引数のデフォルト値は1ですが、これを0.5にすると描画面の横幅が半分に、 2にすると横幅が2倍になります。

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

  ctx.setTransform(0.5,0,0,1,0,0);     //横幅を半分にする
  ctx.fillStyle = "rgba(255,0,0,0.5)";
  ctx.fillRect(0,0,360,240);  //canvasサイズと同じ矩形を描いてみる

  ctx.setTransform(2,0,0,1,0,0);       //横幅を２倍にする
  ctx.fillStyle = "rgba(0,0,255,0.5)";
  ctx.beginPath();
  ctx.arc(90,120,80,0,Math.PI*2,true);  //円を描いてみる
  ctx.fill();
</script>

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

まずはcanvasの描画面を横半分にして、canvasサイズと同じ360×240ピクセルの矩形を描きました。 ご覧の通り半分の大きさで描画されています。canvas左側を基準として、右から左に押し縮められた格好になっています。

次にcanvasの描画面の横幅を2倍に引き伸ばして、円を描いてみました。 ご覧の通り円も横に引き伸ばされて楕円になっています。

canvas右側を傾ける

今度はsetTransform()の第２引数を変えてみます。canvas右側を傾けます。 第２引数のデフォルト値は０ですが、マイナスを指定すると上に傾け、 プラスを指定すると下に傾けます。

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

  ctx.font = "normal 40px Arial";
  
  ctx.setTransform(1,-0.5,0,1,0,0);     //右端を上に傾ける
  ctx.fillStyle = "rgba(255,0,0,0.5)";
  ctx.fillRect(0,0,360,240);  //canvasサイズと同じ矩形を描いてみる
  ctx.fillStyle = "red";
  ctx.fillText("JavaScript",20,120);

  ctx.setTransform(1,0.5,0,1,0,0);       //右端を下に傾ける
  ctx.fillStyle = "rgba(0,0,255,0.5)";
  ctx.fillRect(0,0,360,240);  //canvasサイズと同じ矩形を描いてみる
  ctx.fillStyle = "blue";
  ctx.fillText("JavaScript",20,120);
</script>

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

最初に第２引数にマイナスの値を指定し、canvas右側を上に傾けました。 そしてcanvasサイズと同じ360×240pxの矩形を描画しました。描画結果は上の通りです。 文字も描いていますが、文字の大きさは均一です。 つまりcanvas右は縮んでいるのではなく、上に持ち上げられてcanvas外にはみ出してしまっているのです。

次に第２引数にプラスの値を指定して、同じことをしてみました。今度はcanvas右側が下に傾いていることが分かります。

canvas下側を傾ける

次はsetTransform()の第３引数を変えてみたいと思います。 デフォルト値は０で、マイナスだと左に、プラスだと右に傾きます。

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

  ctx.setTransform(1,0,-0.5,1,0,0);     //下端を左に傾ける
  ctx.fillStyle = "rgba(255,0,0,0.5)";
  ctx.fillRect(0,0,360,240);  //canvasサイズと同じ矩形を描いてみる
  
  ctx.setTransform(1,0,0.5,1,0,0);     //下端を右に傾ける
  ctx.fillStyle = "rgba(0,0,255,0.5)";
  ctx.fillRect(50,50,160,120);  //矩形が平行四辺形になる
</script>

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

最初に第３引数をマイナスに指定し、canvas下端を左に傾けました。 そしてcanvasと同じサイズの矩形を描きました。矩形の下部が左にスライドしているのが分かります。

次に第３引数をプラスに指定し、canvas下端を右に傾けて、小さめの矩形を書きました。 ご覧のように下端が右にスライドし、平行四辺形を描くことに成功しました。

描画面を縦に伸縮させる

このページの最後に、第４引数の値を変えてみたいと思います（第5,6引数は描画面の移動なので、次ページで解説します）。 デフォルト値は１で、０に近付けるほど描画面が上端に向かって押し縮められます。 １より大きくすると、描画面が縦に引き伸ばされていきます。

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

  ctx.setTransform(1,0,0,0.5,0,0);     //描画面を縦半分にする
  ctx.fillStyle = "rgba(255,0,0,0.5)";
  ctx.fillRect(0,0,360,240);  //canvasサイズと同じ矩形を描いてみる
  
  ctx.setTransform(1,0,0,2,0,0);     //描画面を縦2倍にする
  ctx.fillStyle = "rgba(0,0,255,0.5)";
  ctx.beginPath();
  ctx.arc(180,60,50,0,Math.PI*2,true);  //円を描いてみる
  ctx.fill();
</script>

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

まずは第４引数を0.5にして、描画面を縦に押し縮めた後、canvasサイズと同じ矩形を描きました。 ご覧の通り上半分に押し縮められた矩形が描かれました。

次は描画面を縦２倍にして、円を描きました。縦に引き伸ばされて楕円になっています。