填充&描边：渐变-图像-阴影9

/*颜色填充*/
context.fillStyle = 'blue';

//.........................................................................
/*线性渐变，此方法接收4个参数，线段的起始点，这4个参数可以用来控制其渐变的方向，addColorStop方法指定渐变的分隔点,渐变同样适用于其它比如图形、文字等*/
gradient = context.createLinearGradient(0, 0, 0, canvas.height/2);//CanvasGradient实例
gradient.addColorStop(0, 'blue');
gradient.addColorStop(0.25, 'white');
gradient.addColorStop(0.5, 'purple');
gradient.addColorStop(0.75, 'red');//，如果没有下面一行，则最后一个颜色填充没有规定的位置
gradient.addColorStop(1, 'yellow');

context.fillStyle = gradient;
context.rect(0, 0, canvas.width, canvas.height);
context.fill();//图形没有这行代码是不输出的，此行代码必须要

/*镜向渐变，它的用法和线一样，只不过是方法和参数名不同，它只绘制圆锥两个圆中间的部分，这两个圆是居中对齐的*/
gradient = context.createRadialGradient(
                 canvas.width/2, canvas.height, 10,//第一个圆的位置及半径
                 canvas.width/2, 0, 100);//第二个圆的位置及半径


//.........................................................................
/*图形填充
 *第一个参数可以是：加载的图片、当前某一个canvas、video
 *第二个参数是平铺模式：可选值有 repeat  repeat-x  repeat-y no-repeat
*/                 
var pattern = context.createPattern(image, repeatString);//这种的初始化一般放在img.onload回调函数中
context.fillStyle = gradient;


/*阴影，绘制阴影需要一个辅助的位图，所以有时会比较耗时，在一般的程序中能不用就不用*/
context.shadowColor = 'rgba(0,0,0,0.7)';//000是黑
context.shadowOffsetX = 1;
context.shadowOffsetY = 1;
context.shadowBlur = 2;