如何创建渐变 (HTML)

项目
03/04/2016

[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅最新文档 ]

形状和线条并不是只能为纯色。用在画布中的渐变实际上是一种类型的颜色值，因此，你可以将它应用于 fillStyle 和 strokeStyle 属性。

渐变可用来在图像中产生密度或颜色在方向上的变化。这可用于产生背景图像，指出地图中的高度，或者指出你希望向图面中添加照明和底纹的任何位置。

渐变对于简化网页非常有用，因为你可以避免针对这些效果使用图像，还可以最小化加载它们所需的带宽和时间。而且，由于渐变是以编程方式生成的，因此可以对它们进行方便的缩放和重用。

先决条件

本主题假定你会使用 JavaScript 创建基本 Windows 应用商店应用并在该应用中使用 Windows JavaScript 库模板。有关创建第一个采用 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 位置。

垂直线性渐变

在此示例中，为 myGradient 变量分配了 createLinearGradient 方法。在下一步中向渐变中添加颜色时，这一点非常有用。
```
var myGradient=context.createLinearGradient(0, 0, 200, 0);
```
若要创建垂直线性渐变，即渐变的底纹从一侧过渡到另一侧，请将渐变起点的 x 和 y 位置设置为 0 和 0，并将终点的 x 和 y 位置设置为 200 和 0。由于 y 值（第 2 个和第 4 个参数）均为 0，因此渐变的底纹会从左侧平滑过渡到右侧。
水平渐变

若要创建从顶部过渡到底部的渐变，请将 x 值（第 1 个和第 3 个参数）保持固定，并使 y 值（第 2 个和第 4 个参数）保持在 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 坐标。
endRadius 是结束圆的半径。

传统的径向渐变

若要创建"传统的"径向渐变，即颜色从一个圆平滑过渡到另一个圆，需要将这两个圆的 x/y 坐标设置为同一个值，并确保一个渐变圆的 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 变量用于将 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)

这是在 canvas 元素周围创建灰色边框的 CSS 的示例。

/* 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>

Share via