HTML5中怎么用Canvas实现变形

本篇内容主要讲解“HTML5中怎么用Canvas实现变形”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“HTML5中怎么用Canvas实现变形”吧!

变形（即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();

到此，相信大家对“HTML5中怎么用Canvas实现变形”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！