HTML5 / Canvas で拡大・縮小・回転


前回、CSS3とJavaScriptでもやったので今度はCanvasでやってみる。

変換系は移動が translate(x, y)、回転が rotate(r)、拡大・縮小が scale(sx, sy) と用意されてます。
が、回転の中心が左上になるため、最初に対象物の中心にずらす移動が必要です。

1
2
3
4
5
ctx.translate(x, y);
ctx.rotate(r);
ctx.scale(sx, sy);
ctx.translate(-w/2, -h/2);
ctx.fillRect(0, 0, w, h);

変換は実行する逆順に処理していくことに注意。

一連の処理をまとめて行列で指定できる setTransform もあります。上記の処理を同じように行列で指定すると下記のようになります。
※前もって行列計算してあります

1
2
3
4
5
6
7
8
9
10
11
var sin = Math.sin(r);
var cos = Math.cos(r);
var m = [
    sx * cos,
    sx * sin,
    -sy * sin,
    sy * cos,
    -sx * cos * w/2 + sy * sin * h/2 + x,
    -sx * sin * w/2 - sy * cos * h/2 + y
];
ctx.setTransform(m[0], m[1], m[2], m[3], m[4], m[5]);

これでフレームごとに各値を変えていけばアニメーションにも使えます。
サンプル

Canvas Transform – jsdo.it – share JavaScript, HTML5 and CSS

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です