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

最新推荐文章于 2024-04-12 10:30:40 发布

xinma

最新推荐文章于 2024-04-12 10:30:40 发布

阅读量1.3k

点赞数

分类专栏： html5 文章标签： html5 function null c

html5 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

如上图所示：

x’=x+dx

y’=y+dy

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

也即是说可以使用

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

也可以使用

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

二．缩放context.scale(s_x, s_y)：

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

x’=s_x*x

y’=s_y*y

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

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

也即是说可以使用

context.transform(s_x,0,0,s_y,0,0)代替context.scale(s_x,s_y);

也可以使用context.transform (0,s_y,s_x,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θ

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

也即是说可以用

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){
 varcanvas=document.getElementByIdx_x_x_x(id);
 if(canvas==null)
 returnfalse;
 varcontext=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();
}

在火狐上运行如下：
Html5 Canvas 变换矩阵与坐标变形之间的关系（没事动手写写教程，有益身心健康，欢迎点评）

这是用transform做的，童鞋可以试试用rotate和translate写写试试，看看效果是否相同。

转载自：http://blog.sina.com.cn/s/blog_5f38c0560100uzrj.html

xinma

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Html5 Canvas 变换矩阵与坐标变形之间的关系

Html5 Canvas变形个人觉得本质其实就是矩阵变换transform坐标变形的三种方式，平移translate, 缩放scale以及旋转rotate都可以通过transform做到。现在我们先来看看矩阵变换的定义：Context.transform(m11,m12,m21,m22,dx,dy); 该方法使用一个新的变化矩阵与当前变换矩阵进行乘法运算，该变换矩阵的形
复制链接

扫一扫

专栏目录