请选择 进入手机版 | 继续访问电脑版

HTML5星空

HTML5星空 首页 HTML5教程 Canvas 查看内容

HTML5 Canvas变形

2013-12-15 18:39| 发布者: admin| 查看: 1241| 评论: 0

摘要: 变形(即transform())是一个不太常用的方法。在介绍此方法之前,有必要向读者介绍一下变形矩阵的概念(这里涉及图形学知识,若无兴趣可以跳过)。在数学上,矩阵是指纵横排列的二维数据表格,最早来自方程组的系数 ...
变形(即transform())是一个不太常用的方法。在介绍此方法之前,有必要向读者介绍一下变形矩阵的概念(这里涉及图形学知识,若无兴趣可以跳过)。

在数学上,矩阵是指纵横排列的二维数据表格,最早来自方程组的系数和常数所组成的方阵,其主要作用就是简化线性方程组的求解。矩阵类似数据库表,是一组行列数字的集合。根据矩阵的行列长度,可以将N行N列矩阵称为N×N矩阵。其中行向量是一个N×1的矩阵,列向量为1×N的矩阵。

矩阵有多种运算方式。一般情况下,加法运算用于图像的平移,而乘法运算则用于图形的变形操作。做矩阵乘法运算时,必须满足第一个矩阵的列数应等于第二个矩阵的行数。
对于变形矩阵,这里以缩放为例来加以说明。参照上一节示例,欲将元素放大2倍,一般使用ctx.scale(2,2)即可。
对于原来的元素,其自身有一个坐标(x,y),我们将其作为一个一行两列的矩阵A[x,y],目标坐标为(2x,2y),再将其看成一个矩阵B[2x,2y],则其变形矩阵为一个2×2矩阵。回到transform()方法,此方法有6个参数,即transform(m11, m12, m21, m22, m13,m23)。

这6个参数的具体说明如下:

transform()的参数说明:
m11 控制元素的x轴方向大小。正数是放大,负数是缩小
m12 控制元素的旋转。正数表示顺时针,负数表示逆时针
m21 控制元素的倾斜。正数表示向右倾斜,负数表示向左倾斜
m22 控制元素的y轴方向大小
m13 控制元素的x轴坐标位置
m23 控制元素的y轴坐标位置

translate()、scale()和rotate()等Canvas方法都是transform()的特例。下面比较说明一下这些参数。
 坐标转换translate(dx,dy)相当于 transform(1,0,0,1,dx,dy)。
 缩放scale(sx,xy)相当于 transform(sx,0,0,sy,0,0)。
 旋转rotate(A)相当于transform(cosA,sinA,-sinA,cosA,0,0)。以(dx,dy)为基准点旋转角度A,则表达式为
transform(cosA, sinA, -sinA, cosA, dx(1-cosA) + dysinA, dy(1-cosA) - dxsinA);
以(dx,dy)为基准点进行(sx,sy)比例缩放,则表达式为
transform(sx, 0, 0, sy, dx(1-sx), dy(1-sy));

这里有必要介绍一下setTransform()方法,它与transform()方法是组合方法,它的参数也与transform()方法的参数一样。在使用时应复位当前矩阵,然后再用相同的参数去调用transform()方法,此处不再详细介绍。

下面给出一个示例来说明transform()的缩放运用,代码如下:
ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
ctx.fillRect(0, 0, 200, 200);
ctx.save();
ctx.transform(2,0,0,2,0,0);
ctx.fillStyle = 'rgba(0, 0, 0, 0.4)';
ctx.fillRect(0, 0, 200, 200);
ctx.restore();

执行效果见图:




鲜花

握手

雷人

路过

鸡蛋

相关阅读

快讯

     京ICP备14042305号

html5star team © 2012-2013 html5星空 Comsenz Inc.

GMT+8, 2019-12-11 11:13 , Processed in 0.087514 second(s), 31 queries .

返回顶部