master2012

导航

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

http://blog.sina.com.cn/s/blog_5f38c0560100uzrj.html

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)：

Html5 <wbr>Canvas <wbr>变换矩阵与坐标变形之间的关系（没事动手写写教程，有益身心健康，欢迎点评）

如上图所示：

x’=x+dx

y’=y+dy

也即是：Html5 <wbr>Canvas <wbr>变换矩阵与坐标变形之间的关系（没事动手写写教程，有益身心健康，欢迎点评）

 也即是说可以使用

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轴上的缩放倍数)

可以得到：Html5 <wbr>Canvas <wbr>变换矩阵与坐标变形之间的关系（没事动手写写教程，有益身心健康，欢迎点评）

 

也即是说可以使用

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

也可以使用context.transform (0,sy,sx,0, 0,0);

 

三．旋转context.rotate(θ)：

Html5 <wbr>Canvas <wbr>变换矩阵与坐标变形之间的关系（没事动手写写教程，有益身心健康，欢迎点评）




如上图图所示：

B点是通过A点逆时针旋转θ得到

x=r*cosa

y=r*sina

即

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

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

也即是Html5 <wbr>Canvas <wbr>变换矩阵与坐标变形之间的关系（没事动手写写教程，有益身心健康，欢迎点评）

 

也即是说可以用

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 onload="draw('canvas');">
<canvas id="canvas" width="400" height="300" />
</body>
</html>

 

javaScript代码：

function draw(id){
 

   var canvas=document.getElementByIdx_x_x_x(id);
    if(canvas==null)
    return false;
    var context=canvas.getContext('2d');
    context.transform(1,0,0,1,200,150);
    context.beginPath();
    context.fillStyle='rgba(255,0,0,0.25)';
    rad=18*Math.PI/90;
    for(i=0;i<10;i++){
        context.fillRect(0,0,100,100);
        context.transform(Math.cos(rad),Math.sin(rad),-Math.sin(rad),Math.cos(rad),0,0);
        context.closePath();
    }
    context.fill();
}
   
   

posted on 2013-08-23 11:01  master2012  阅读(311)  评论(0)    收藏  举报