如何建立漸層 (HTML)
[ 本文的目標對象是撰寫 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>