6. アフィン変換
ざっくりした意味
平行移動を伴う線形変換
✓ 0
◆ ✓ ◆✓ ◆ ✓ ◆
x a c x tx
= +
y0 b d y ty
線形変換 平行移動
0 1 0 10 1
x0 a c tx x
@ y0 A = @ b d ty A @ y A
1 0 0 1 1
同次座標系
1つの行列で線形変換と平行移動を表すために次元を1つ増やす
7. Canvas によるアフィン変換
0 0
1 0 10 1
x a c tx x
@ y0 A = @ b d ty A @ y A
1 0 0 1 1
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.transform(a, b, c, d, tx, ty);
ctx.drawImage(img, 0, 0);
8. 拡大・縮小
0 1 0 10 1
x0 sx 0 0 x
0
sx = w /w @ y 0 A = @ 0 sy 0 A @ y A
元の画像 0 1 0 0 1 1
w 0 1
w sx x
x = @ sy y A
1
0 h
h
var canvas = document.getElementById("canvas");
0 var ctx = canvas.getContext("2d");
sy = h /h ctx.scale(sx, sy);
y ctx.drawImage(img, 0, 0);
9. 回転
0 0
1 0 10 1
x cos sin 0 x
@ y 0 A = @ sin cos 0 A@ y A
元の画像
1 0 0 1 1
0 1
x cos y sin
✓ x = @ x sin + y cos A
1
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.rotate(theta);
y ctx.drawImage(img, 0, 0);
10. 平行移動
0 0
1 0 10 1
x 1 0 tx x
@ y0 A = @ 0 1 ty A @ y A
元の画像
1 0 0 1 1
0 1
tx x + tx
ty x = @ y + ty A
1
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.translate(tx, ty);
y ctx.drawImage(img, 0, 0);
11. 剪断
0 0
1 0 10 1
x 1 tan ⇥ 0 x
@ y 0 A = @ tan 1 0 A@ y A
元の画像
1 0 0 1 1
0 1
x + y tan ⇥
↵ x = @ x tan + y A
1
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.transform(1, Math.tan(alpha),
Math.tan(beta), 1
y 0, 0);
ctx.drawImage(img, 0, 0);