ブログデザイン備忘録～canvasによる図形の変形

1. 拡大と縮小
2. 回転
3. 移動
4. 変換マトリックスによる変形
5. まとめ

　今回はcanvasとjavascriptを用いて図形を変形する方法について紹介する。

atatat.hatenablog.com

1. 拡大と縮小

　図形をXY方向に拡大および縮小して描画するにはscale(sx,xy)を用いる。sx、syにX方向およびY方向の拡大、1以下であれば縮小率を指定する。なお、scale()などの変形は図形描画する前に指定しておく。

<canvas width="300" height="150" id="canv_trf1" style="background-color:yellow;"></canvas>

<script>
var canvas = document.getElementById('canv_trf1');
if (canvas.getContext) {
    var context = canvas.getContext('2d');
    context.fillStyle = "blue";
    context.fillRect(20,20,80,80);
    context.scale(2, 0.5);
    context.fillStyle = "red";
    context.fillRect(20,20,80,80);

}
</script>

以下の実行結果のように四角形は半透明になってキャンバスや図形同士が重ね合わさっていることがわかる。

2. 回転

　図形を回転させるにはrotate(rad)で角度はラジアンで指定する。図形の回転中心は座標(0,0)でキャンバスの左上が中心（図形の中心ではない）になるため、かなり使いにくいかもしれない。

<canvas width="300" height="150" id="canv_trf2" style="background-color:yellow;"></canvas>

<script>
var canvas = document.getElementById('canv_trf2');
if (canvas.getContext) {
    var context = canvas.getContext('2d');
    context.fillStyle = "blue";
    context.fillRect(80,20,50,50);
    context.rotate(45/180*Math.PI);
    context.fillStyle = "red";
    context.fillRect(80,20,50,50);

}
</script>

3. 移動

　図形を平行移動させるにはtranslate(X,Y)を用いる。X, Yに平行移動させるXY方向の移動量を指定する。

<canvas width="300" height="150" id="canv_trf3" style="background-color:yellow;"></canvas>

<script>
var canvas = document.getElementById('canv_trf3');
if (canvas.getContext) {
    var context = canvas.getContext('2d');
    context.fillStyle = "blue";
    context.fillRect(20,20,80,80);
    context.translate(100,30);
    context.fillStyle = "red";
    context.fillRect(20,20,80,80);

}
</script>

4. 変換マトリックスによる変形

　変換マトリックスを用いて図形の変形(伸縮、傾斜・回転、水平移動）させることができる。`transform(a,bc,d,e,f)変換マトリックスPは以下のように定義される。

${\bf{P}}= \begin{pmatrix} a&c&e \\ b&d&f \\ 0&0&1 \end{pmatrix}$

aはX方向の伸縮、dはY方向の伸縮、cはX方向の傾斜、bはY方向の傾斜、eはX方向の平行移動、fはY方向の平行移動をあらわす。図形の各点座標 ${\bf{r}}=(x,y,1)$ に変換マトリックスを作用させることで変形させた新しい図形の点座標 ${\bf{r'}}$ が得られる。

${\bf{r'}}={\bf{P}}{\bf{r}}$

<canvas width="300" height="150" id="canv_trf4" style="background-color:yellow;"></canvas>

<script>
var canvas = document.getElementById('canv_trf4');
if (canvas.getContext) {
    var context = canvas.getContext('2d');
    context.fillStyle = "blue";
    context.fillRect(20,20,80,80);
    context.transform(1, 0.1, 0, 1, 50, 30);
    context.fillStyle = "red";
    context.fillRect(20,20,80,80);

}
</script>

変換マトリックスを用いて図形を回転させるには、以下の回転行列を適用すればよい。

${\bf{P}}= \begin{pmatrix} \cos \theta & - \sin \theta & 0 \\ \sin \theta & \cos \theta &0 \\ 0&0&1 \end{pmatrix}$

<canvas width="300" height="150" id="canv_trf5" style="background-color:yellow;"></canvas>

<script>
var canvas = document.getElementById('canv_trf5');
if (canvas.getContext) {
    var context = canvas.getContext('2d');
    context.fillStyle = "blue";
    context.fillRect(80,20,50,50);
    var angle=45/180*Math.PI;
    context.transform(Math.cos(angle), Math.sin(angle), -Math.sin(angle), Math.cos(angle), 0, 0);
    context.fillStyle = "red";
    context.fillRect(80,20,50,50);

}
</script>