Html5 Canvas变形 个人觉得本质其实就是矩阵变换transform
坐标变形的三种方式,平移translate, 缩放scale以及旋转rotate都可以通过transform做到。
现在我们先来看看矩阵变换的定义:
Context.transform(m11,m12,m21,m22,dx,dy);
该方法使用一个新的变化矩阵与当前变换矩阵进行乘法运算,该变换矩阵的形式如下:
m11 | m21 | dx |
m12 | m22 | dy |
0 | 0 | 1 |
也就是说假设A(x,y)要变换成B(x’,y’)可以通过乘以上述矩阵即可得到。
一.平移context.translate(dx,dy):
如上图所示:
x’=x+dx
y’=y+dy
也即是:
context.transform (1,0,0,1,dx,dy)代替context.translate(dx,dy)。
也可以使用
context.transform(0,1,1,0.dx,dy)代替。
二.缩放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θ
也即是
也即是说可以用
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(θ)。
也可以使用
context.transform(-Math.sin(θ*Math.PI/180),Math.cos(θ*Math.PI/180),
Math.cos(θ*Math.PI/180),Math.sin(θ*Math.PI/180), 0,0)替代。
html5代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>transform示例</title>
<script type="text/javascript" src="script.js"charset="gb2312"></script>
</head>
<body οnlοad="draw('canvas');">
<canvas id="canvas" width="400" height="300"/>
</body>
</html>
javaScript代码:
function draw(id){
}
在火狐上运行如下:
这是用transform做的,童鞋可以试试用rotate和translate写写试试,看看效果是否相同。