createLinearGradient(x1, y1, x2, y2)
创建线性渐变对象，从点(x1, y1)开始，至点(x2, y2)结束。
createRadialGradient(x1, y1, r1, x2, y2, r2)
创建径向渐变对象，参数是两个圆，一个圆圆心是(x1, y1)，半径是r1，另一个圆圆心是(x2, y2)，半径是r2。

例子：

).);

这样就创建了渐变对象。然后用addColorStop方法添加颜色：

gradient.addColorStop(position, color)
position的值是0~1，这决定了颜色相对于渐变对象的位置，color是表示颜色的字符串，只要CSS中用来表示的颜色的方法都可以，比如十六进制、rgb或rgba。

线性渐变例子

ctx lingrad ))))).)))...)); }

效果

径向渐变例子

ctx radgrad )))).)))).)))).))))..)radgrad3)radgrad2)radgrad); }

效果

图案

现在介绍的这个方法可以用图片去填充图形。

createPattern(image, type)　　
这个方法创建并返回了一个pattern对象，image参数是CanvasImageSource，HTML图片元素、canvas或

type参数有如下几种值：

repeat
在垂直和水平方向上重复平铺图片。
repeat-x
水平平铺图片。
repeat-y
垂直平铺图片。
no-repeat
不平铺重复图片。

pattern对象的创建方法和渐变对象类似：

()ptrn );

注意 这个方法和drawImage类似，要确保图片加载完，否则图片不能显示。 例子

ctx img ().() ptrn )ptrn)

效果

阴影

阴影涉及四个属性：

shadowOffsetX = float
阴影水平方向距离。默认值为0。不受transform变换矩阵影响。
shadowOffsetY = float
阴影垂直方向距离。默认值为0。不受transform变换矩阵影响。
shadowBlur = float
阴影模糊大小。默认值为0。模糊数值并不是模糊的像素的大小，是模糊的程度。不受transform变换矩阵影响。
shadowColor = color
阴影颜色。默认值是全透明黑色。

例子

ctx .......)

效果

Canvas填充规则

如果两个路径交叉或重叠，我们可以设置填充的方式。
参数有两种：

"nonzero": 默认值，按照non-zero winding rule规则填充。
"evenodd": 按照even-odd winding rule规则填充。

例子

ctx ..).)

效果