HTML5 Canvas渐变是可以用作形状的填充或者笔触的颜色模式，而不是纯色。渐变是一种颜色的图案，从一种颜色渐变为另一种颜色。

有两种类型的渐变：

• 线性的 Linear
• 径向的 Radial

线性渐变会以水平，垂直或者对角线的线性模式更改颜色。

径向渐变用圆形图案改变颜色，从里到外改变颜色。

两种类型的渐变都在本文中介绍。

线性渐变

如前所述，线性渐变使用线性图案更改颜色。使用2D上下文函数createLinearGradient()创建线性渐变。这是一个例子：

var canvas  = document.getElementById("ex1");
    var context = canvas.getContext("2d");

    var x1 =   0;
    var y1 =   0;
    var x2 = 100;
    var y2 =   0;
    var linearGradient1 = context.createLinearGradient(x1, y1, x2, y2);

函数createLinearGradient()具有4个参数：x1，y1，x2，y2. 这4个参数确定渐变图案的方向和延伸。梯度从第一点x1，y1延伸到第二点x2，y2.

通过仅改变x轴上的参数值(对于x1和x2)来创建水平渐变，如下所示：

var x1 =   0;
    var y1 =   0;
    var x2 = 100;
    var y2 =   0;
    var linearGradient1 = context.createLinearGradient(x1, y1, x2, y2);

通过仅更改y轴上的参数值(对于y1和y2)来创建垂直渐变，如下所示：

var x1 =   0;
    var y1 =   0;
    var x2 =   0;
    var y2 = 100;
    var linearGradient1 = context.createLinearGradient(x1, y1, x2, y2);

通过同时更改x和y轴参数来创建对角线渐变。这是一个例子：

var x1 =   0;
    var y1 =   0;
    var x2 = 100;
    var y2 = 100;
    var linearGradient1 = context.createLinearGradient(x1, y1, x2, y2);

颜色停止

上面的示例未显示渐变的颜色。为了设置渐变的颜色，可以在渐变对象上使用addColorStop()函数。这是一个例子：

var linearGradient1 = context.createLinearGradient(0,0,100,0);
linearGradient1.addColorStop(0, 'rgb(255, 0, 0)');
linearGradient1.addColorStop(1, 'rgb(  0, 0, 0)');

addColorStop()函数有两个参数。第一个参数是介于0和1之间的数字。该数字表明此色标将放置在渐变区域中的距离。第二个参数是颜色本身。请注意，此示例如何使用" rbg(red，green，blue)"符号表示颜色，其中每个红色/绿色/蓝色值可以是0到255之间的数字(以1个字节表示)。

上面的示例添加了两个色标。第一个是红色，它设置为从渐变的起点开始(第一个参数值为0)。第二种颜色是黑色，设置为位于渐变区域的末尾(第一个参数为1)。

我们可以为渐变添加两个以上的色标。这是一个具有3个色标的示例：

var linearGradient1 = context.createLinearGradient(0,0,100,0);
linearGradient1.addColorStop(0  , 'rgb(255, 0, 0)');
linearGradient1.addColorStop(0.5, 'rgb(  0, 0, 255);
linearGradient1.addColorStop(1  , 'rgb(  0, 0, 0)');

此示例添加了位于渐变中间的蓝色。渐变将因此从红色平滑变为蓝色，然后变为黑色。

使用渐变作为填充或者描边样式

我们可以将渐变用作填充或者笔触样式。这是通过简单地将2D上下文的fillStyle或者strokeStyle属性设置为指向渐变对象来完成的。这是一个例子：

var linearGradient1 = context.createLinearGradient(0,0,100,0);
linearGradient1.addColorStop(0  , 'rgb(255, 0, 0)');
linearGradient1.addColorStop(0.5, 'rgb(  0, 0, 255);
linearGradient1.addColorStop(1  , 'rgb(  0, 0, 0)');

context.fillStyle   = linearGradient1;

context.strokeStyle = linearGradient1;

现在，我们可以使用渐变作为填充颜色或者描边颜色进行绘制。这是一个示例，该示例绘制两个矩形，一个填充，另一个被描边(概述)：

var canvas  = document.getElementById("ex2");
var context = canvas.getContext("2d");

var linearGradient1 = context.createLinearGradient(0,0,100,0);
linearGradient1.addColorStop(0  , 'rgb(255, 0,   0)');
linearGradient1.addColorStop(0.5, 'rgb(  0, 0, 255)');
linearGradient1.addColorStop(1  , 'rgb(  0, 0,   0)');

context.fillStyle = linearGradient1;
context.fillRect(10,10,100, 100);

var linearGradient2 = context.createLinearGradient(125,0, 225,0);
linearGradient2.addColorStop(0  , 'rgb(255, 0,   0)');
linearGradient2.addColorStop(0.5, 'rgb(  0, 0, 255)');
linearGradient2.addColorStop(1  , 'rgb(  0, 0,   0)');

context.strokeStyle = linearGradient2;
context.strokeRect(125, 10, 100, 100);

梯度范围

重要的是要了解渐变的程度。如果渐变从x = 10扩展到x = 110，则只有x值在10到110之间的图形才会应用渐变颜色。在此区域之外绘制的图形仍会受到渐变的影响，但将使用渐变的第一种或者最后一种颜色进行绘制。

例如，想象一个从x = 150到x = 350的渐变。渐变将从蓝色渐变为绿色。 x值小于150的所有图形将以蓝色绘制。 x值大于350绘制的所有图形都将以绿色绘制。只有x值介于150和350之间的图形才会具有渐变颜色。

这是一个代码示例，该示例使用上述渐变绘制了5个矩形，以说明这一点：

var linearGradient1 = context.createLinearGradient(150, 0, 350,0);
linearGradient1.addColorStop(0, 'rgb(0,   0, 255)');
linearGradient1.addColorStop(1, 'rgb(0, 255, 0)');

context.fillStyle = linearGradient1;

context.fillRect(10,10,130, 100);
context.fillRect(150,10, 200, 100);
context.fillRect(360,10, 130, 100);

context.fillRect(100,120, 150, 100);
context.fillRect(280,120, 150, 100);

本示例仅在渐变中使用2种颜色，但是如果在渐变中使用3种或者更多颜色，则效果相同。在渐变区域之外，仅使用第一个和最后一个停止色。

渐变程度对于理解正确着色形状很重要。在许多情况下，可能必须为每种形状专门定义渐变，以适合绘制形状的区域。

径向渐变

径向渐变类型是从内部颜色向外延伸到一种或者多种其他颜色的圆形图案。

径向渐变由2个圆定义。每个圆都有一个中心点和一个半径。这是一个代码示例：

var x1 = 100;   // x of 1. circle center point
var y1 = 100;   // y of 1. circle center point
var r1 = 30;    // radius of 1. circle

var x2 = 100;   // x of 2. circle center point
var y2 = 100;   // y of 2. circle center point
var r2 = 100;   // radius of 2. circle

var radialGradient1 =
    context.createRadialGradient(x1, y1, r1, x2, y2, r2);

radialGradient1.addColorStop(0, 'rgb(0,   0, 255)');
radialGradient1.addColorStop(1, 'rgb(0, 255,   0)');

context.fillStyle = radialGradient1;
context.fillRect(10,10, 200, 200);

如我们所见，定义了两个中心点(x1，y1和x2，y2)，并且定义了两个半径(r1和r2)。这些作为参数传递给2D上下文的createRadialGradient()函数。

应将两个圆定义为不同的半径，以使它们形成一个内圆和一个外圆(至少大小)。然后，渐变中的颜色将从一个圆圈圆形延伸到另一个圆圈。

色标的工作方式与线性渐变一样。它们定义了在渐变中使用什么颜色，以及应该在渐变范围内放置什么颜色。

添加的色标将在两个圆圈之间的某个位置匹配。例如，颜色停止中的第一个参数0表示颜色将从第一个圆圈开始的地方开始。颜色停止中的第一个参数1表示颜色将从第二个圆圈开始的地方开始。

如果两个圆具有相同的中心点，则渐变将是完全圆形的，并且颜色从内圆渐变为外圆。如果两个圆具有不同的中心点，则梯度将更像圆锥形，就像从灯投射的光(非正交地指向表面)一样。这是一个类似锥形的代码示例：

var x1 = 100;
var y1 = 100;
var r1 = 30;
var x2 = 150;
var y2 = 125;
var r2 = 100;

var radialGradient1 = context.createRadialGradient(x1, y1, r1, x2, y2, r2);
radialGradient1.addColorStop(0, 'rgb(0,   0, 255)');
radialGradient1.addColorStop(1, 'rgb(0, 255,   0)');

context.fillStyle = radialGradient1;
context.fillRect(10,10, 200, 200);