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实现变形”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
名称栏目:HTML5中怎么用Canvas实现变形
本文网址:http://scyanting.com/article/gchgdg.html