html中渐变怎么写,如何创建渐变 (HTML)

如何创建渐变 (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: 创建渐变

在拥有了