線性漸變

這個(gè)和css中的background-image: linear-gradient() 異曲同工，只是操作步驟略有不同。

1.第1步，創(chuàng)建漸變

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

2.第2步，設(shè)置顏色點(diǎn)位置和顏色值

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

當(dāng)顏色點(diǎn)stop的位置相同時(shí)，則不會(huì)產(chǎn)生漸變效果，而是很清晰的邊界線

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

當(dāng)然xStart,yStart等值可以為負(fù)值

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

還有可以通過(guò)xStart, yStart, xEnd, yEnd這幾個(gè)參數(shù)控制繪制的方向，默認(rèn)的是45度，左上角到右下角

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

射線漸變Radial Gradient

這個(gè)漸變是建立在 兩個(gè)圓環(huán) 的基礎(chǔ)上的

1.第1步，創(chuàng)建漸變

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

2.第2步，設(shè)置顏色點(diǎn)和顏色值

這個(gè)顏色點(diǎn)可以設(shè)置任意個(gè)數(shù)

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

這個(gè)功能比較強(qiáng)大，可以根據(jù)img | video | grd（漸變圖，甚至可以根據(jù)另一個(gè)canvas(畫(huà)布)來(lái)創(chuàng)建填充樣式對(duì)象

比如

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

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

對(duì)于img對(duì)象

這個(gè)是基于 new Image() 的對(duì)象, 多用于紋理材料的重復(fù)

使用方法：

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

效果代碼

創(chuàng)建canvas畫(huà)布作為參數(shù)

利用星空?qǐng)D：

function createBgCanvas() {
  # 創(chuàng)建一個(gè)新的canvas畫(huà)布
  var bgCanvas = document.createElement('canvas');
  bgCanvas.width = 100;
  bgCanvas.height = 100;
 
  var bgCanvasContext = bgCanvas.getContext('2d');
  # 在這個(gè)canvas上繪制一個(gè)星星
  drawStar(bgCanvasContext, 50, 50, 50, 0);
  return bgCanvas;
}

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

具體效果

總結(jié)

主要是關(guān)于canvas填充樣式(fillStyle)的設(shè)置的一些apis:

• createLinearGradient(x0, y0, x1, y1)
• createRadialGradient(x0, y0, r0, x1, y1, r1)
• 以及強(qiáng)大的createPattern(patternSource, repeatStyle)