网页设计作业中绘制变形图形_学生网页设计制作作业_网页制作作业成品_网页设计作业_计算机毕业设计_php作业_asp作业_网页模板

热点资讯更多

网页设计作业中绘制变形图形

我们在制作网页设计作业时，绘制变形图形是必须的，下面是对绘制变形图形的介绍

坐标的变换
对坐标的变换处理，有如下三种方式。
平移
移动图形的绘制主要是通过translate 方法来实现的，该方法定义如下所示。
context. translate(x, y);
translate 方法使用两个参数——x表示将坐标轴原点向左移动多少个单位，默认情况下为像素；y表示将坐标轴原点向下移动多少个单位。
缩放
使用图形上下文对象的scale方法将图形缩放。该方法的定义如下所示。
context.scale(x,y);
scale方法使用两个参数，x是水平方向的放大倍数，y是垂直方向的放大倍数。将图形缩小的时候，将这两个参数设置为0到1之间的小数就可以了，例如0.5是指将图形缩小一半。
旋转
使用图形上下文对象的rotate方法将图形进行旋转。该方法的定义如下所示。
context.rotate(angle);
rotate方法接受一个参数angle，angle是指旋转的角度，旋转的中心点是坐标轴的原点。旋转是以顺时针方向进行的，要想逆时针旋转时，将angle设定为负数就可以了。

矩阵变换
变换矩阵，这个矩阵是专门用来实现图形变形的，它与坐标一起配合使用，以达到变形的目的。当图形上下文被创建完毕时，事实上也创建了一个默认的变换矩阵，如果不对这个变换矩阵进行修改，那么接下来绘制的图形将以画布的最左上角的坐标原点绘制图形，绘制出来的图形也经过缩放、变形的处理，但是如果对这个变换矩阵进行修改，那么情况将会是
不一样的。使用图形上下文对象的transform方法修改变换矩阵，该方法的定义如下所示。
transform(m11, m12, m21, m22, dx, dy)
该方法使用一个新的变换矩阵与当前变换矩阵进行乘法运算，该变换矩阵的形式如下所示。
m11    m21    dx
m12    m22    dy
0           0    1
其中m11，m21，m12，m22四个参数用来修改使用这个方法之后绘制图形时的计算方法，以达到变形目的，dx与dy参数移动坐标原点，dx表示将坐标原点在x轴上向右移动x个单位，dy表示将坐标原点在y轴上向下移动y个单位。默认情况下以像素为单位。

上一篇：网页设计作业中绘制渐变图形

下一篇：网页设计作业中给图形绘制阴影

分享到： QQ空间新浪微博腾讯微博人人网更多