canvas阴影与渐变

 1、阴影
　　shadowColor 阴影颜色

　　shadowOffsetX    阴影x轴的偏移量

　　shadowOffsetY    y轴偏移量

　　shadowBlur   模糊像素

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

context.shadowColor = 'rgba(280,187,188,1)';
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.shadowBlur = 20;
context.fillStyle = 'rgba(280,187,188,1)';
context.fillRect(50,50,100,100);

2、渐变，由canvasGradient实例表示。

（1）线性渐变createLinearGradient(起点x，起点y，终点x，终点y)，创建指定大小的渐变。

var gradient = context.createLinearGradient(30,30,130,130);
gradient.addColorStop(0,'rgba(280,187,188,1)');// addColorStop()指定色标
gradient.addColorStop(1,'rgba(180,187,188,1)');
context.fillStyle = gradient;
context.fillRect(10,10,100,100);

注：上例中执行代码所得矩形，粉色多于灰色，是因为矩形的起点位置位于渐变的位置的左上方。

 （2）径向渐变（或放射渐变）createRadialGradient()，接收6个参数。两个圆的圆心及半径。

context.save();
var gradient = context.createRadialGradient(350,350,10,350,350,100);
gradient.addColorStop(0,'rgba(180,187,188,1)');
gradient.addColorStop(1,'rgba(280,187,188,1)');
context.fillStyle = gradient;
context.fillRect(250,250,200,200);

 3、使用图片、画布或video

（1）使用图片createPattern（img, repeat-style）

var backgroundImg = new Image();
backgroundImg.src = 'fanfan.jpg';
backgroundImg.onload = function(){
    var pattern = context.createPattern(backgroundImg, 'no-repeat');//可使用repeat-x/repeat-y/repeat
    context.fillStyle = pattern;
    context.fillRect(10,10,560,560);
}

（2）使用画布createPattern(canvas, repeat-style)

var backgroundCanvas = document.createElement('canvas');
backgroundCanvas.width = 100;
backgroundCanvas.height = 100;
backgroundContext = backgroundCanvas.getContext('2d');
backgroundContext.fillStyle = '#eee';
backgroundContext.fillRect(0,0,100,100);

var patternCanvas = context.createPattern(backgroundCanvas, 'repeaet');
context.fillStyle = patternCanvas;//使用backgroundCanvas填充canvas
context.fillRect(0,0,300,300);

（3）使用video