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属性。