HTML5 Canvas 渐变

HTML5 Canvas渐变是可以用作形状的填充或笔触的颜色模式，而不是纯色。渐变是从一种颜色渐变到另一种颜色的颜色模式。渐变有两种类型：Linear（线性）和Radial（径向）

HTML5 Canvas渐变是可以用作形状的填充或笔触的颜色模式，而不是纯色。渐变是从一种颜色渐变到另一种颜色的颜色模式。这里有一些示例来说明我的意思:

有两种类型的渐变:

1. Linear（线性）

2. 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()函数有2个参数。第一个参数是介于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;

现在，您可以使用渐变作为填充或描边颜色进行绘制。这是一个绘制两个矩形的示例-一个被填充，另一个被描边（概述）:

<canvas id="ex2" width="500" height="125" style="border: 1px solid #cccccc;">
    HTML5 Canvas not supported
</canvas>
<script>
var canvas  = document.getElementById("ex2");
var context = canvas.getContext("2d");

var linearGradient1 = context.createLinearGradient(0,0,100,0); //horizontal gradient
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); //horizontal gradient
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);

</script>

这是在画布上绘制时的结果:

渐变梯度范围

重要的是要了解渐变的程度。如果渐变从x = 10扩展到x = 110，则只有x值在10到110之间的图形才会应用渐变颜色。在此区域之外绘制的图形仍会受到渐变的影响，但是将使用渐变的第一种或最后一种颜色进行绘制。
例如，假设一个梯度从x = 150扩展到x =350。该梯度将从蓝色渐变为绿色。x值小于150绘制的所有图形都将以蓝色绘制。x值大于350绘制的所有图形都将以绿色绘制。只有x值介于150和350之间的图形才会具有渐变颜色。
这是一个代码示例，该示例使用上述渐变绘制了5个矩形，以说明这一点

<canvas id="ex3" width="500" height="250" style="border: 1px solid #cccccc;">
    HTML5 Canvas not supported
</canvas>

<script>
var canvas  = document.getElementById("ex3");
var context = canvas.getContext("2d");

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);
</script>

这就是在画布上绘制时的结果。请注意，只有x值在150到350之间的图形才具有渐变颜色，而其余图形是全蓝色（第一个色标）或全绿色（最后一个色标）。

本示例仅在渐变中使用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）。这些作为参数传递给createRadialGradient()2D上下文的功能。
应该用不同的半径定义两个圆，因此它们将导致一个内圆和一个外圆（至少大小）。然后，渐变中的颜色将从一个圆圈圆形延伸到另一个圆圈。
色标的工作方式与线性渐变一样。它们定义了在渐变中使用什么颜色，以及应该在渐变范围内放置什么颜色。
添加的色标将在两个圆圈之间的某个位置匹配。例如，颜色停止中的第一个参数0表示颜色将从第一个圆圈开始的地方开始。颜色停止中的第一个参数1表示颜色将从第二个圆圈开始的地方开始。
这是在HTML5画布上绘制时的代码示例的结果:

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

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);

这是在画布上绘制渐变时的样子: