## 第六課時：漸變色：圖像填充 以下方法用于設置漸變效果和圖像填充效果。 * `CanvasRenderingContext2D.createLinearGradient()`：定義線性漸變樣式。 * `CanvasRenderingContext2D.createRadialGradient()`：定義輻射漸變樣式。 * `CanvasRenderingContext2D.createPattern()`：定義圖像填充樣式。 `createLinearGradient()`方法按照給定直線，生成線性漸變的樣式。 ~~~ ctx.createLinearGradient(x0, y0, x1, y1) ~~~ `ctx.createLinearGradient(x0, y0, x1, y1)`方法接受四個參數：`x0`和`y0`是起點的橫坐標和縱坐標，`x1`和`y1`是終點的橫坐標和縱坐標。通過不同的坐標值，可以生成從上至下、從左到右的漸變等等。 該方法的返回值是一個`CanvasGradient`對象，該對象只有一個`addColorStop()`方向，用來指定漸變點的顏色。`addColorStop()`方法接受兩個參數，第一個參數是0到1之間的一個位置量，0表示起點，1表示終點，第二個參數是一個字符串，表示 CSS 顏色。 ~~~ var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); var gradient = ctx.createLinearGradient(0, 0, 200, 0); gradient.addColorStop(0, 'green'); gradient.addColorStop(1, 'white'); ctx.fillStyle = gradient; ctx.fillRect(10, 10, 200, 100); ~~~ 上面代碼中，定義了漸變樣式`gradient`以后，將這個樣式指定給`fillStyle`屬性，然后`fillRect()`就會生成以這個樣式填充的矩形區域。 `createRadialGradient()`方法定義一個輻射漸變，需要指定兩個圓。 ~~~ ctx.createRadialGradient(x0, y0, r0, x1, y1, r1) ~~~ `createRadialGradient()`方法接受六個參數，`x0`和`y0`是輻射起始的圓的圓心坐標，`r0`是起始圓的半徑，`x1`和`y1`是輻射終止的圓的圓心坐標，`r1`是終止圓的半徑。 該方法的返回值也是一個`CanvasGradient`對象。 ~~~ var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); var gradient = ctx.createRadialGradient(100, 100, 50, 100, 100, 100); gradient.addColorStop(0, 'white'); gradient.addColorStop(1, 'green'); ctx.fillStyle = gradient; ctx.fillRect(0, 0, 200, 200); ~~~ 上面代碼中，生成輻射樣式以后，用這個樣式填充一個矩形。 `createPattern()`方法定義一個圖像填充樣式，在指定方向上不斷重復該圖像，填充指定的區域。 ~~~ ctx.createPattern(image, repetition) ~~~ 該方法接受兩個參數，第一個參數是圖像數據，它可以是`<img>`元素，也可以是另一個`<canvas>`元素，或者一個表示圖像的 Blob 對象。第二個參數是一個字符串，有四個可能的值，分別是`repeat`（雙向重復）、`repeat-x`(水平重復)、`repeat-y`(垂直重復)、`no-repeat`(不重復)。如果第二個參數是空字符串或`null`，則等同于`null`。 該方法的返回值是一個`CanvasPattern`對象。 ~~~ var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); var img = new Image(); img.src = 'https://example.com/pattern.png'; img.onload = function( ) { var pattern = ctx.createPattern(img, 'repeat'); ctx.fillStyle = pattern; ctx.fillRect(0, 0, 400, 400); }; ~~~ 上面代碼中，圖像加載成功以后，使用`createPattern()`生成圖像樣式，然后使用這個樣式填充指定區域。