图案与渐变（6）

图案与渐变（6）

前面我们使用strokeStyle和fillStyle来设置绘制图形的边框颜色和填充颜色。前面的教程我们看到的都是给这两个属性设置具体的颜色值，比如#fff、red之类。其实在Canvas中，除了strokeStylefillStyle设置颜色之外，还可以设置渐变色或图案

渐变

• ctx.createLinearGradient(x1, y1, x2, y2)——线型渐变

createLinearGradient()创建一个新的CanvasGradient对象，然后添加渐变颜色，再将该对象赋值给strokeStyle或fillStyle即可使用

(x1,x2)、(y1,y2)表示渐变的起点与终点。起点和终点描述了所绘制渐变效果的长度、位置和方向(起点指向终点)

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

var gradient = ctx.createLinearGradient(100, 100, 200, 200);
gradient.addColorStop(0, 'orange');//添加渐变颜色
gradient.addColorStop(0.5, 'red');
gradient.addColorStop(1, 'yellow');

ctx.fillStyle = gradient;
ctx.fillRect(100, 100, 100, 100);

渐变位置也可以在所绘制图形外（即渐变的起点与终点所确定的那条线可以在所绘制图形外），因为我们只需要他们确定的渐变的方向，长度，位置

关于线型渐变原理，看下图便知

• ctx.createRadialGradient(x1, y1, r1, x2, y2, r2)——径向渐变

前三个参数描述了起始圆——(x1,y1)表示圆心坐标，r1表示圆的半径；同理后三个参数描述了结束圆

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

var gradient = ctx.createRadialGradient(150, 150, 50, 300, 300, 30);
gradient.addColorStop(0, 'orange');
gradient.addColorStop(0.5, 'red');
gradient.addColorStop(1, 'yellow');

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

上述径向渐变，两个圆不是同心圆，实际上的渐变是连接两圆周的椎体

当两圆是同心圆时，则从起始圆原型向外

具体看下图

• CanvasGradient对象.addColorStop(position, color)

position：指定渐变中颜色所在的相对位置，其接受一个0至1之间的值

color：指定渐变中的颜色

该方法的使用已经在上面的代码中展现——向渐变对象中添加颜色，并设置颜色位置

图案

strokeStyle与fillStyle的值还可以设为图案，一遍用图案进行绘制填充

• ctx.createPattern(image,”repeat|repeat-x|repeat-y|no-repeat”)

第一个参数除了是image对象外，还可以是canvas或video对象

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

var gradient = ctx.createPattern(document.getElementsByTagName('img')[0], 'no-repeat');

ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 500, 500);

ps：本文案参考了
https://www.w3cplus.com/canvas/gradient.html