坐标变换html5,Html5 Canvas 变换矩阵与坐标变形之间的关系

Html5 Canvas变形本质其实就是矩阵变换transform。坐标变形的三种方式，平移translate, 缩放scale以及旋转rotate均可以经过transform作到。spa

如今咱们先来看看矩阵变换的定义：orm

Context.transform(m11,m12,m21,m22,dx,dy);ci

该方法使用一个新的变化矩阵与当前变换矩阵进行乘法运算，该变换矩阵的形式以下：table

m11

m21

dx

m12

m22

dy

0

0

1

也就是说假设A(x,y)要变换成B(x’,y’)能够经过乘以上述矩阵便可获得。

一．平移context.translate(dx,dy)：form

如上图所示：class

x’=x+dxtransform

y’=y+dy方法

也便是：

也便是说能够使用im

context.transform (1,0,0,1,dx,dy) 代替 context.translate(dx,dy)。top

二．缩放context.scale(sx, sy)：

缩放我直接用公式来解释：

x’=sx*x

y’=sy*y

(其中，sx 和sy分别表示在x轴和y轴上的缩放倍数)

能够获得：

也便是说能够使用

context.transform(sx,0,0,sy,0,0)代替context.scale(sx, sy);

也能够使用context.transform (0,sy,sx,0, 0,0);

三．旋转context.rotate(θ)：

如上图图所示：

B点是经过A点逆时针旋转θ获得

x=r*cosa

y=r*sina

即

x’=r*cos(a+θ)=x*cosθ-y*sinθ

y’=r*sin(a+θ)=x*sinθ+y*cosθ

PS：两角和、差公式

sin(A+B) = sinAcosB+cosAsinB

sin(A-B) = sinAcosB-cosAsinB

cos(A+B) = cosAcosB-sinAsinB

cos(A-B) = cosAcosB+sinAsinB

tan(A+B) = (tanA+tanB)/(1-tanAtanB)

tan(A-B) = (tanA-tanB)/(1+tanAtanB)

cot(A+B) = (cotAcotB-1)/(cotB+cotA)

cot(A-B) = (cotAcotB+1)/(cotB-cotA)

也便是

也便是说能够用

context.transform(Math.cos(θ*Math.PI/180)，Math.sin(θ*Math.PI/180), -Math.sin(θ*Math.PI/180),Math.cos(θ*Math.PI/180)，0，0)能够替代context.rotate(θ)。