canvas效果案例：线性渐变、径向渐变及纹理

1、设置线性渐变

语法

创建
var linearGrad = context.createLinearGradient(startX, startY, endX, endY);


增加颜色
linearGrad.addColorStop(0-1, 'color');
linearGrad.addColorStop(0-1, 'color');
linearGrad.addColorStop(0-1, 'color');

赋给填充样式
fillStyle = linearGrad;

// 创建渐变
var linearG = ctx.createLinearGradient(0, 0, 50, 1000);

// 添加颜色 0.0 - 1.0 之间
linearG.addColorStop(0, '#FFF');
linearG.addColorStop(0.5, '#F00');
linearG.addColorStop(1, '#000');

ctx.fillStyle = linearG;

ctx.fillRect(0, 0, 100, 100);
图片中色差请忽略：但这个可以看清楚确实是线性渐变

2. 径向渐变
语法

var radialGrand = context.createRadialGradient(x1, y1, r1, x2, y2, r2);
x1: 第一个圆的原点X坐标
y1: 第一个圆的原点Y坐标
r1: 第一个圆的半径
x2: 第二个圆的原点X坐标
y2: 第二个圆的原点Y坐标
r2: 第二个圆的半径

增加颜色
radialGrand.addColorSt