绘制变形图形--Canvas的基本操作

1、坐标的变换

对坐标的变换处理,有如下三种方式。
平移
移动图形的绘制主要是通过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设定为负数就可以了。

   
   
  
绘制变形的图形  
  
  
  
  
  

绘制变形图形--Canvas的基本操作_第1张图片


2、矩阵变换

变换矩阵,这个矩阵是专门用来实现图形变形的,它与坐标一起配合使用,以达到变形的目的。当图形上下文被创建完毕时,事实上也创建了一个默认的变换矩阵,如果不对这个变换矩阵进行修改,那么接下来绘制的图形将以画布的最左上角的坐标原点绘制图形,绘制出来的图形也经过缩放、变形的处理,但是如果对这个变换矩阵进行修改,那么情况将会是不一样的。使用图形上下文对象的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个单位。默认情况下以像素为单位。
下面通过实例1来看一下transform方法的工作原理。在该实例中,用循环的方法绘制了几个圆弧,圆弧的大小与位置均不变,只是使用了transform方法让坐标原点每次向下移动10个像素,使得绘制出来的圆弧相互重叠,然后对圆弧设置七彩颜色,使这些圆弧的外观达到彩虹的效果。

   
   
  
transform方法的实例  
  
  
  
  
  

绘制变形图形--Canvas的基本操作_第2张图片

下面通过实例2来了解一下setTransform的具体的使用
方法。在该实例中首先创建一个红色边框的长方形,然后将该长
方形顺时针旋转45度,绘制出一个新的长方形,并且绘制其边框为绿色,然后将红色长方形扩大2.5倍绘制新的长方形,边框为蓝色,最后在红色长方形右下方绘制同样大小的长方形,边框为灰色。

   
   
  
setTransform方法的实例  
  
  
  
  
  

绘制变形图形--Canvas的基本操作_第3张图片

你可能感兴趣的:(编程开发)