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);

图片中色差请忽略：但这个可以看清楚确实是线性渐变

linear.gif

2. 径向渐变

语法

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

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

var radialG = ctx.createRadialGradient(200, 200, 0, 200, 200, 100);

radialG.addColorStop(.25, '#fff');
radialG.addColorStop(.5, '#f00');
radialG.addColorStop(.75, '#0f0');
radialG.addColorStop(1, '#00f');

ctx.fillStyle = radialG;
ctx.fillRect(200, 200, 100, 100);  

radial.gif

3. pattern(纹理填充)

可以将图片或另一个canvas作为填充素材
语法：

ctx.createPattern(img/canvas, repeat）
repeat: no-repeat | repeat-x | repeat-y | repeat

// pattern-图片
var img = new Image();
img.src = './image/瓢虫.jpg';

img.onload = function () {
    var pattern = ctx.createPattern(img, 'no-repeat');

    ctx.fillStyle = pattern;

    ctx.fillRect(0, 0, 400, 280);
}

image.png

// pattern-canvas
// 创建一个新的canvas
var newCan = document.createElement('canvas');
newCan.width = 500;
newCan.height = 500;
var newCtx = newCan.getContext('2d');

var img2 = new Image();
img2.src = './image/瓢虫.jpg';

img2.onload = function () {
    var pattern = newCtx.createPattern(img2, 'repeat');
    newCtx.fillStyle = pattern;
    newCtx.fillRect(0, 0, 500, 500);
    // 将新的canvas作为纹理填充
    var pattern2 = ctx.createPattern(newCan, 'repeat');
    ctx.fillStyle = pattern2;
    ctx.fillRect(0, 0, 500, 500);
}

image.png