canvas 线条渐变追逐_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