线性渐变

这个和css中的background-image: linear-gradient() 异曲同工，只是操作步骤略有不同。

1.第1步，创建渐变

var grd = context.createLinearGradient(xStart, yStart, xEnd, yEnd);

2.第2步，设置颜色点位置和颜色值

// stop: 取值范围为： 0.0 - 1.0
grd.addColorStop(stop, color)

示例：

// ctx 为context

var grd = ctx.createLinearGradient(0, 0, 400, 400);
grd.addColorStop(0.0, 'white')；
grd.addColorStop(1.0, 'black');

ctx.fillStyle = grd;
ctx.fillRect(0, 0, 400, 400);

当颜色点stop的位置相同时，则不会产生渐变效果，而是很清晰的边界线

var grd = ctx.createLinearGradient(0, 0, 400, 400);
grd.addColorStop(0.5, 'white')；
grd.addColorStop(0.5, 'black');

ctx.fillStyle = grd;
ctx.fillRect(0, 0, 400, 400);

当然xStart,yStart等值可以为负值

var grd = ctx.createLinearGradient(-100, -100, 400, 400);

还有可以通过xStart, yStart, xEnd, yEnd这几个参数控制绘制的方向，默认的是45度，左上角到右下角

// 垂直方向
var grd = ctx.createLinearGradient(0, 0, 0, 400);
// 水平方向
var grd = ctx.createLinearGradient(0, 0, 400, 0);

射线渐变Radial Gradient

这个渐变是建立在 两个圆环 的基础上的

1.第1步，创建渐变

var radialGrd = ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);

2.第2步，设置颜色点和颜色值

这个颜色点可以设置任意个数

radialGrd.addColorStop(stop, color)

示例：

canvas.height = 800
canvas.width = 1200

var grd = ctx.createRadialGradient(
  canvas.width / 2, canvas.height, 0,
  canvas.width ,canvas.height, canvas.height*2
);
grd.addColorStop(1, 'black')
grd.addColorStop(0,'#035')

ctx.fillStyle = grd;

ctx.fillRect(0, 0, canvas.width, canvas.height)

createPattern

这个功能比较强大，可以根据img | video | grd（渐变图，甚至可以根据另一个canvas(画布)来创建填充样式对象

比如

createPattern([img | video | grd | canvas], repeat-style)

repeat-style: repeat | no-repeat | repeat-x | repeat-y

对于img对象

这个是基于 new Image() 的对象, 多用于纹理材料的重复

使用方法：

var bgIamge = new Iamge();
bgIamge.src = 'somepic.jpg';

// 使用onload 事件
bgImage.onload = function() {
  var partten = ctx.createPattern(bgImage, 'repeat');
  ctx.fillStyle = pattern;
  ctx.fillRect(0, 0, 400, 400);
}

效果代码

创建canvas画布作为参数

利用星空图：

function createBgCanvas() {
  # 创建一个新的canvas画布
  var bgCanvas = document.createElement('canvas');
  bgCanvas.width = 100;
  bgCanvas.height = 100;
 
  var bgCanvasContext = bgCanvas.getContext('2d');
  # 在这个canvas上绘制一个星星
  drawStar(bgCanvasContext, 50, 50, 50, 0);
  return bgCanvas;
}

var bgCanvas = createBgCanvas();
# 创建pattern
var pattern = ctx.createPattern(bgCanvas, 'repeat');
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, 800, 800);

具体效果

总结

主要是关于canvas填充样式(fillStyle)的设置的一些apis:

• createLinearGradient(x0, y0, x1, y1)
• createRadialGradient(x0, y0, r0, x1, y1, r1)
• 以及强大的createPattern(patternSource, repeatStyle)