如何建立漸層 (HTML)

發行項
03/04/2016

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱最新文件 ]

形狀與線條不限於純色。畫布中所使用的漸層其實是一種色彩值，因此您可以將它套用至 fillStyle 與 strokeStyle 屬性。

漸層可用來在影像中產生濃度或色彩的方向性變化。當您要產生背景影像、在地圖中指示高度，或在表面上新增光線和陰影時，都可以使用這個功能。

漸層對於簡化網頁應用程式很實用，因為您不需使用影像即可做到這些效果，可將載入這些效果所需的頻寬和時間降至最低。而且由於它們是透過程式設計方式產生的，因此可以輕鬆調整及重複使用。

先決條件

這個主題假設您可以利用 JavaScript，以適用於 JavaScript 的 Windows Library 範本建立基本的 Windows 市集應用程式。如需使用 JavaScript 建立您的第一個 Windows 市集應用程式的指示，請參閱建立您的第一個 Web 應用程式。如需使用 WinJS 範本的指示，請參閱如何取得和使用 WinJS 工具組。

指示

步驟 1: 取得轉譯內容

我們必須先從 Canvas 元素取得轉譯內容，然後才可以在畫布上繪製影像及使用漸層為影像著色。所有繪圖方法和屬性皆定義於轉譯內容中。

為了改善使用 JavaScript 的 Windows 市集應用程式的效能，請先等候 HTML 頁面載入後，再執行 JavaScript 程式碼。如果要這麼做，請將繪製影像的程式碼放在載入頁面之後所呼叫的函式中。
```
window.onload = drawGradient;   

function drawGradient() {...
```
使用 getElementById 抓取畫布文件物件模型 (DOM) 節點，然後使用 getContext 方法存取轉譯內容。

有多種可以讓您使用不同方式繪製的轉譯內容。例如，2D 圖形使用的 2D 內容和 3D 圖形使用的 3D 內容。這個主題中的範例使用 2D 轉譯內容。
```
    // Get the canvas element and specify a 2d drawing context.
    var context = document.getElementById("canvas").getContext("2d");
```

步驟 2: 建立漸層

取得轉譯內容之後，即可定義漸層。漸層有兩種：線性 (直線漸層) 和放射狀 (或圓形)。

Linear gradient

線性漸層方法使用四個引數：

createLinearGradient(startX, startY, endX, endY)

第一組的兩個引數是漸層起點的 x 和 y 位置，第二組的兩個引數則是漸層終點的 x 和 y 位置。

垂直線性漸層

在這個範例中，createLinearGradient 方法已指派給 myGradient 變數。這對於我們在下個步驟將色彩新增到漸層很有用。
```
var myGradient=context.createLinearGradient(0, 0, 200, 0);
```
如果要建立垂直線性漸層 (也就是漸層從一側漸漸變化至另一側)，漸層起點的 x 和 y 位置應設為 0 和 0，而終點的 x 和 y 位置則設為 200 和 0。因為兩個 y 值 (第二和第四個參數) 都是 0，因此漸層會由左至右均勻變化。
水平漸層

如果要建立從上到下漸漸變化的漸層，請將 x 值 (第一和第三個參數) 固定，並將 y 值 (第二和第四個參數) 設為 0 和畫布高度的值。
```
var myGradient=context.createLinearGradient(0, 0, 0, 100);
```
對角線漸層

您也可以建立對角線方向的漸層。在這個範例中，x 和 y 這兩個值都改變，分別設為 200 和 100。
```
var myGradient=context.createLinearGradient(0, 0, 200, 100);
```

Radial gradient

createRadialGradient 方法使用六個引數：

createRadialGradient(startX, startY, startRadius, endX, endY, endRadius)

其中的參數為：

startX 和 startY 是起點圓形在畫布上的 x 和 y 座標。
startRadius 是起點圓形的半徑。
endX 和 endY 是終點圓形在畫布上的 x 和 y 座標。
是終點圓形的半徑。

傳統放射狀漸層

如果要建立"傳統"放射狀漸層 (色彩從一個圓形至另一個圓形均勻變化)，您必須將兩個圓形的 x/y 座標都設為相同的值，並確定其中一個漸層圓形比另一個圓形大。
```
var myGradient = context.createRadialGradient(52, 50, 10, 52, 50, 200);
```
起點和終點位置不同

在上一個放射狀漸層範例中，起點和終點位置的 x/y 座標相同，分別是 52 和 50，只不過兩個圓形的半徑大小是從 10 增加到 200。這會將放射狀漸層的變化中心擺在圓形中心。

如果將起點和終點位置移得更開一點，則會得到一個橫跨畫布的圓錐形漸層。
```
var myGradient = context.createRadialGradient(32, 30, 5, 60, 60, 50);
```
在這個範例中，起點圓形的 x/y 座標是 32 和 30，半徑是 5。而終點圓形的 x/y 座標是 60 和 60，半徑則比較大，是 50。以下為其結果：

步驟 3: 設定色彩停止點

漸層有兩個或更多的 addColorStop 方法：

addColorStop(offset, color)

如果要新增色彩停止點，您必須指定要套用的顏色，以及該顏色在漸層中的位移位置。漸層位置可以是 0 (漸層起點) 和 1 (漸層終點) 之間的任何位置。

在我們的範例中，myGradient var 用來將 addColorStop 設為從 0 至 1，如此一來，漸層會從白色均勻變化成黑色。

myGradient.addColorStop(0,"white");
myGradient.addColorStop(1,"black");

多個色彩停止點

您可以使用多個色彩停止點。在這個範例中，第二個 addColorStop 將一個色彩停止點指定在漸層的中間位置：
```
  myGradient.addColorStop(0,"orange");
  myGradient.addColorStop(.5, "green");
  myGradient.addColorStop(1, "blue");
```
會產生以下漸層：

步驟 4: 設定填滿樣式

繪製漸層之前，fillStyle 必須設為 myGradient。

context.fillStyle = myGradient;

最後，fillRect 方法用來繪製影像：

context.fillRect(0, 0, 200, 100);

完整範例

線性漸層

這個 JavaScript 程式碼使用 Canvas 元素繪製矩形，然後使用對角線線性漸層來執行矩形的 fillStyle。

window.onload = drawGradient;   

function drawGradient() {

    // Get the canvas element and specify a 2d drawing context.
    var context = document.getElementById("canvas").getContext("2d");

    // Create a linear gradient.
    var myGradient=context.createLinearGradient(0, 0, 300, 100);

    // Set the color stops.
    myGradient.addColorStop(0, "white");
    myGradient.addColorStop(1, "black");

    // Set the fill style to the gradient.
    context.fillStyle = myGradient;

    // Draw the rectangle.
    context.fillRect(0, 0, 200, 100);
}

放射狀漸層

這個 JavaScript 程式碼使用 Canvas 元素繪製圓形，然後使用放射狀漸層來執行圓形的 fillStyle。

window.onload = drawGradient;   

function drawGradient() {

    // Get the canvas element and specify a 2d drawing context.
    var context = document.getElementById("canvas").getContext("2d");
  
    // Create the radial gradient.
    var myGradient = context.createRadialGradient(52, 50, 10, 52, 50, 200);

    // Set the color stops.
    myGradient.addColorStop(0, "white");
    myGradient.addColorStop(1, "black");

    // Set the fill style to the gradient.     
    context.fillStyle = myGradient;

    // Draw a circle.
    context.beginPath();
    context.arc(52, 50, 40, 0, Math.PI*2, true); 
    context.closePath();
    context.fill();
}

階層式樣式表 (CSS)

這是一個 CSS 範例，用來在 Canvas 元素周圍建立灰色框線。

/* Style the canvas element with a grey border. */
canvas { border: 1px solid #c3c3c3; }

HTML 檔案

這個 HTML 檔案會建立 Canvas 元素並使用外部的 JavaScript 及 CSS 檔案。

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="myJavascript.js"></script>
        <link Rel="stylesheet" Href="myStyle.css" Type="text/css">
    </head>
    <body>
        <canvas id="canvas" width="200" height="100" />
    </body>
</html>

共用方式為