4.5　　控制填充风格

　　4.5.1　　线性渐变

　　　　　　使用线性渐变只要按如下步骤进行即可：

　　　　　　　　1：调用CanvasRenderingContext2D的createLinearGradinent(float xStart,float yStart,float xEnd,float yEnd)

　　　　　　　　　　方法创建一个线性渐变，该方法返回一个CanvasGradient对象。

　　　　　　　　2:调用CanvasGradient对象的addColorStop(float offset,String color)方法向线性渐变对象中添加颜色。

　　　　　　　　   其中offset参数控制添加颜色的点，该参数是0-1之间的小数，其中0表示把颜色添加在起始点，1表示把

　　　　　　　　　颜色添加在结束点；而color则控制颜色值。

　　　　　　　　3：将CanvasGradient对象赋给CanvasRenderingContext2D的fillStyle或StrokeStyle属性。

　　4.5.2　　圆形渐变

　　　　　　CanvasRenderingContext2D还提供了一个createRadialGradient(float xStart,foat yStart,float radiusStart,

　　　　　　float xEnd,float yEnd,float radiusEnd)方法，该方法用于创建圆形渐变，该方法与线性渐变的步骤完全相似，

　　　　　　唯一区别就是该方法的参数不同。xStart、yStart控制渐变开始圆圈的圆心，radiusStart则控制开始圆圈的半径；

　　　　　　xEnd、yEnd控制渐变结束圆圈的圆心，radiusEnd则控制结束圆圈的半径。

　　4.5.3　　位图填充

　　　　　　HTML5为位图填充提供了CanvasPattern对象，使用位图填充的步骤如下：

　　　　　　　　1：调用CanvasRenderingContext2D的createPattern(Image image,String repetitionStyle)方法

　　　　　　　　　　创建一个位图填充，该方法返回一个ConvasPattern对象。该方法的第一个参数代表作为填充的位图

　　　　　　　　　　对象；第二个参数代表重复风格，该参数接受如下几个参数值。

　　　　　　　　　　　　repeat：填充时位图在X、Y两个方向上平铺重复。该参数的默认值是repeat。

　　　　　　　　　　　　repeat-x：填充时位图只在X方向上平铺重复。

　　　　　　　　　　　　repeat-y：填充时位图只在Y方向上平铺重复。

　　　　　　　　　　　　no-repeat：填充时位图不平铺重复。

　　　　　　　　2：将CanvasPattern对象赋给CanvasRenderingContext2D的fillStyle或StrokeStyle属性。