HTML5 Canvas：绘制渐变色

HTML5 Canvas渐变是一种用于填充或描述图形的颜色模式。渐变颜色是由不同的颜色过渡而不是单一的颜色。让我们来看看canvas渐变颜色的几个例子：

您的浏览器不支持HTML5 Canvas！

按类型可分为两种类型：

• 线性渐变

• 径向渐变

线性渐变以线性模式改变颜色，即水平、垂直或对角方向。

径向渐变以圆形模式改变颜色，颜色以圆形中心向外辐射。

线性渐变

正如前面所说，线性渐变以线性模式改变颜色。我们可以使用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()函数有四个参数：x1，y1，x2和y2。这四个参数决定了渐变的方向和距离。线性渐变将从第一点(x1、y1)扩展到第二点(x2、y2)。

水平线性渐变只是水平方向的参数值(x1和x2)不同，例如:

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

垂直线性渐变只是垂直方向的参数值(y1和y2)不同，例如:

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

对角线的线性渐变水平与垂直方向的参数不同，例如：

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

颜色停止点（Color Stops）

在上面的例子中，线性渐变没有使用任何颜色。为了指出使用什么渐变颜色，可以在渐变对象上使用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之间的一个值，指定颜色进入渐变的距离，第二个参数是颜色值，用于例子rgb()颜色值。

在上面的例子中，渐变增加了两种颜色。第一种颜色是红色，设置在渐变的开始。第二种颜色是黑色，设置在渐变的结束。

您可以添加通过addColorStop()添加更多颜色的函数。例如，下面的例子添加了三种颜色：

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;

通过fillStyle或strokeStyle渐变填充或描边可以通过指向渐变对象来完成。

现在我们可以为图形填充渐变色或描边渐变色。以下是一个例子，一个矩形填充渐变色和一个矩形描边渐变色。

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

var lineargradient1 = context.createLinearGradient(0,0,100,0);
lineargradient1.addColorStop(0  , 'rgb(246, 36, 89)');
lineargradient1.addColorStop(0.5, 'rgb( 31, 58, 147)');
lineargradient1.addColorStop(1  , 'rgb( 34, 49,  63)');

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

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

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

您的浏览器不支持HTML5 Canvas！

渐变的长度

当我们使用渐变时，我们应该非常了解渐变长度的概念。如果我们设置渐变从x=10扩展到x=110如果距离，渐变只会作用于水平方向从10到110的距离。超出此范围的图形仍然会受到渐变颜色的影响，但超出此范围的颜色只会是渐变的开始或结束。

在距离方面，有一个水平线性渐变，x1=150，x2=350。从蓝色到绿色的渐变。然后定位所有水平方向x蓝色蓝色将填充值小于150的图形。所有水平方向定位x值大于350的图形将用绿色填充。只有那些在水平方向上定位的人x用蓝绿渐变色填充值在150到350之间的图形。

具体来说，下面的代码，这里画了五个矩形，并用上面提到的渐变填充它们，让我们看看效果：

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

您的浏览器不支持HTML5 Canvas！

从以上结果可以看出，渐变区以外的图形只会用开始或结束的颜色填充。

渐变长度是一个非常重要的概念，需要仔细理解。只有掌握了它，才能在使用渐变时得到正确的结果。

径向渐变

径向渐变是一种从圆心位置向外辐射的圆形颜色扩展模式。以下是一个例子：

您的浏览器不支持HTML5 Canvas！

定义一个径向渐变为两个圆。每个圆都有一个圆心和一个半径。以下是示例代码：

var x1 = 100;   // 第一个圆心的X坐标
var y1 = 100;   // 第一个圆心Y坐标
var r1 = 30;    // 第一个圆的半径

var x2 = 100;   // 第二个圆心的X坐标
var y2 = 100;   // 第二个圆心Y坐标
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);

如上述代码所示，这里有两个圆，圆心分别是x1,y1和x2,y2，它们的半径分别是r1和r2，这些值将作为参数传输到2D上下文createRadialGradient()方法中。

这两个圆必须设置不同的半径，形成一个内圆和一个外圆。这种渐变颜色从一个圆辐射到另一个圆。

颜色停止点将添加到两个圆之间。例如，在上述代码中，第一个颜色停止点中的参数0表示颜色从第一个圆开始，第二个颜色停止点中的参数1表示第二个颜色从第二个圆开始。

以下是上述代码的返回结果：

您的浏览器不支持HTML5 Canvas！

如果两个圆的圆心位置相同，径向渐变将是一个完整的圆。如果两个圆的圆心位置不同，径向渐变看起来像探照灯发出的光。例如：

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

结构如下所示：

您的浏览器不支持HTML5 Canvas！

返回HTML5 Canvas教程目录

相关阅读

• MDN CreateLinearGradient

• MDN CreateRadialGradient