漸變和圖案

除了CCS顏色外，Canvas還支援漸變（CanvasGradient）和圖案（CanvasPattern）。把strokeStyle和fillStyle屬性設定為漸變或圖案，就可以實現多樣化的繪製效果。

漸變

在Canvas中，CanvasGradient物件表示一個顏色漸變。將畫筆上下文物件的fillStyle或strokeStyle屬性設定為一個CanvasGradient物件，就可以實現顏色漸變效果。

Canvas支援兩種漸變方式：一種是線性漸變（Linear Gradient），另一種是徑向漸變（Radial Gradient）。

為畫布中的圖形應用漸變色，需要三步：

1）建立漸變物件

呼叫context.createLinearGradient() 方法來建立線性漸變，它返回CanvasGradient物件的一個例項。格式為：

createLinearGradient(xStart, yStart, xEnd, yEnd)

該方法的引數代表一個矩形區域，(startX, startY)為矩形左上角頂點的座標， (endX, endY) 為矩形右下角頂點的座標，這個矩形區域就是線性漸變的作用區域。

呼叫context.createRadialGradient() 方法來建立徑向漸變，它返回CanvasGradient物件的一個例項。格式為：

context.createRadialGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd)

該方法的引數代表兩個虛擬的圓。內圓的圓心為(xStart, yStart)、半徑為radiusStart，外圓的圓心為(xEnd, yEnd)、半徑為radiusEnd，徑向漸變的作用區域為這兩個圓之間的環狀區域。小圓內及大圓外的區域使用純色，兩個圓之間的區域會用漸變色。

2）定義漸變色

需要為CanvasGradient物件新增漸變的顏色，才能實現漸變效果。呼叫漸變物件的addColorStop(offset, color)方法來新增漸變色，引數offset是0.0~1.0之間的浮點值，代表顏色停止點在漸變線上的位置，漸變物件把整個作用區域看成是一個從0.0到1.0的過度，0.0表示漸變起始點，1.0表示漸變結束點。引數color是一個CSS顏色值。

要實現漸變效果，該方法必須至少被呼叫兩次，分別定義漸變起始點和漸變結束點的顏色。如果還要定義中間位置的顏色，在0.0~1.0之間進行定義即可。

3）應用漸變物件

最後，把漸變物件的值賦給上下文物件的fillStyle屬性或strokeStyle屬性，這樣，接下來呼叫stroke()或fill()方法時，都會使用此漸變色進行描邊或填充，直到將fillStyle屬性或strokeStyle屬性設定為其他值。

應用線性漸變的示例程式碼如下：

var linear = context.createLinearGradient(50,50,250,50);
linear.addColorStop(0.0,'#00f');
linear.addColorStop(0.3,'#0f0');
linear.addColorStop(0.9,'#f00');
linear.addColorStop(1.0,'#f0f');
context.fillStyle = linear;
context.fillRect(50,50,250,50);

上述程式碼定義了一個線性漸變，並在0.0、0.3、0.9和1.0的位置定義了不同的顏色。其執行效果如圖 4‑21 所示：

應用徑向漸變的示例程式碼如下：

var radial = context.createRadialGradient(100,70,10,100,100,80);
radial.addColorStop(0.0,'#fff');
radial.addColorStop(0.1,'#00f');
radial.addColorStop(0.4,'#0f0');
radial.addColorStop(0.7,'#f00');
radial.addColorStop(1.0,'#f0f');
context.arc(100,100,80,0,Math.PI *2);
context.fillStyle = radial;
context.fill();

上述程式碼定義了一個線性漸變，並在0.0、0.3、0.9和1.0的位置定義了不同的顏色。其執行效果如圖 4‑22 所示：

說明：

1、顏色漸變的座標是相對於整個Canvas範圍而言的。比如線性漸變起點是（100, 100），而在（0, 0）的位置繪製矩形，用這個漸變來填充，就沒有填充，因為矩形不在漸變作用區域內，漸變將不起作用。

2、漸變可以用於任何圖形，其應用後的效果不是依賴於所作用的圖形，而是依賴於建立CanvasGradient物件時所指定的作用區域。不管是何種圖形，它都會在指定的作用區域內實現對應的顏色漸變效果。

3、如果定義漸變色的offset不是以0.0開始、1.0結束，則漸變起點之前的顏色將應用漸變起點的顏色，終點之後的顏色將應用漸變終點的顏色。

4、徑向漸變的兩個圓不一定是同心圓，但一般第二個圓會包含第一個圓。

圖案

除了顏色和漸變，Canvas元素也允許使用圖案來對文字和圖形進行描邊或填充。圖案可以是image元素、或canvas元素、或video元素。

使用圖案進行描邊或填充，也需要三步：

首先，建立一個影象物件，這個影象物件可以是文件中的一個<img>元素、或<canvas>元素、或<video >元素、或通過Javascript的image()方法建立的影象物件。

然後，通過createPattern(image, type)方法建立一個CanvasPattern物件。其中，image為用作圖案的影象，type表示影象的平鋪方式，取值及含義見表 4‑3：

最後，把createPattern()方法返回的CanvasPattern物件，賦值給上下文物件的fillStyle或strokeStyle屬性，即可應用該圖案。

以下程式碼建立了四個矩形區域，併為每個矩形區域建立一個填充圖案，第一個矩形區域的影象只顯示一次，第二個矩形區域的影象只在水平方向平鋪，第三個矩形區域的影象只在垂直方向平鋪，第四個矩形區域的影象在水平和垂直方向都平鋪：

function createPattern(){
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var img =newImage();
  img.src ="info.png";
  img.onload =function(){
var no_repeat = context.createPattern(img,"no-repeat");
    context.fillStyle = no_repeat;
    context.fillRect(0,0,100,100);
var repeat_x = context.createPattern(img,"repeat-x");
    context.fillStyle = repeat_x;
    context.fillRect(120,0,100,100);
var repeat_y = context.createPattern(img,"repeat-y");
    context.fillStyle = repeat_y;
    context.fillRect(240,0,100,100);
var repeat = context.createPattern(img,"repeat");
    context.fillStyle = repeat;
    context.fillRect(360,0,100,100);
}
}

上述程式碼的執行效果如圖 4‑23 所示：