HTML5 Canvas 渐变

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

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,?y2);

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

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

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

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

颜色停止

上面的示例未 显示 渐变的颜色。为了设置渐变的颜色，可以addColorStop()在渐变对象上使用该 功能 。这是 一个 示例:

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

该addColorStop() 函数 有2个参数。第 一个 参数是介于0和1之 间的 数字。该数字表明此色标将放置在渐变区域中的距离。第二个参数是颜色本身。请注意，此示例如何使用rbg(red,green,blue)颜色表示法，其中每个红色/绿色/蓝色值可以是0到255之 间的 数字（以1个字节表示）。
上面的示例 添加 了两个色标。第 一个 是红色，设置为从渐变的起点开始（第 一个 参数值为0）。第二种颜色是黑色，设置为位于渐变区域的末尾（第 一个 参数为1）。
您可以为渐变 添加 两个以上的色标。这是 一个 具有3个色标的示例:

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

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

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

您可以将渐变用作填充或笔触样式。只需将2D上下文fillStyle或 stroke Style 属性 设置为指向渐变对象即可完成此操作。这是 一个 示例:

var?linearGradient1?=?context.createLinearGradient(0,?0)');

context.fillStyle???=?linearGradient1;

context. stroke Style?=?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);?//horizontal?gradient
linearGradient1.addColorStop(0??,???0)');
linearGradient1.addColorStop(0.5,?255)');
linearGradient1.addColorStop(1??,???0)');

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

var?linearGradient2?=?context.createLinearGradient(125,?225,0);?//horizontal?gradient
linearGradient2.addColorStop(0??,???0)');
linearGradient2.addColorStop(0.5,?255)');
linearGradient2.addColorStop(1??,???0)');

context. stroke Style?=?linearGradient2;
context. stroke Rect(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,?350,?'rgb(0,???0,?255)');
linearGradient1.addColorStop(1,?255,?0)');

context.fillStyle?=?linearGradient1;

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

context.fillRect(100,120,?150,?100);
context.fillRect(280,?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.crea tera dialGradient(x1,?r1,?y2,?r2);

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

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

如您所见，定义了两个中心点（x1，y1和x2，y2），并且定义了两个半径（r1和r2）。这些作为参数传递给crea tera dialGradient()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.crea tera dialGradient(x1,?r2);
radialGradient1.addColorStop(0,?200);

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

HTML5 Canvas 阴影 ? ?HTML5 Canvas 路径

查看更多关于HTML5 Canvas 渐变的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did92376