第五章canvas

绘制渐变图形

绘制渐变使用图形上下文对象的createLinearGradient方法创建对象

context.createLinearGradient(xstart, ystart,xend, yend);第一、二个参数为渐变起始地点横纵坐标，第三四个参数为渐变结束的横纵坐标。

颜色填充context.addColorStop(offset,color);第一个参数为所设定的颜色离开渐变起始点的偏移量，他的值范围在0到1之间，第二个参数为绘制时使用的颜色。

context.createRadialGradient(400,0,0,400,0,400)第一二个参数表示渐变开始圆心的横纵坐标，第三个参数开始圆的半径。第四五个参数表示结束圆的横纵坐标，第六个参数表示结束圆的半径

绘制变形图形

对坐标的变换处理，有一下三种方式：平移 扩大 旋转

平移

context.translate(x,y);第一个参数表示将坐标轴原点左几个单位，第二个参数表示将坐标轴原点右移多个单位。

扩大

context.scale(x,y);第一个参数表示水平方向上放大的倍数，第二个参数表示垂直方向上放大的倍数。如果要缩小的话就将xy设为0-1之间的小数。

旋转

context.rotate(angle) 参数指的是旋转的角度。默认是正时针的方向，如果取负值。则为逆时针的方向

 

矩阵变换 ：更为复杂的利用矩阵变换实现的变形技术

 这个矩阵是专门用来实现图形变形的。他与坐标一起配合使用，以达到变形的目的，当图形上下文被创建完毕时，事实上也创建了一个默认的变换矩阵，如果不对这个变换举证进行修改，那么接下来绘制的图形将以画布的最左上角为坐标原点绘制图形。绘制出来的图形也不经过缩放，变形的处理，但是如果对这个变换矩阵进行修改，就会有意想不到的效果。

context.transform(m11,m12,m21,m22,dx,dy) 

其中dx dy参数移动坐标原点

translate(x,y) 等价于context.transform(1,0,0,1,x,y)