2

任何人都可以解释我，最好用说明性图片，这些方法是如何工作的？我查看了不同的示例和教程，但似乎无法理解这个想法。我知道，createRadialGradient()创建了两个圆圈，但是这两个圆圈如何相互关联以及addColorStop()方法？

4

1 回答 1

11

是的，我知道这是 necro'd ......但它似乎是一个从未被纠缠过的有效问题，所以我把它留在这里以防其他人需要它。

==================================================== ===============================

嗯，渐变是从一种颜色到另一种颜色的平滑转换。

在任何渐变中，您选择颜色开始的点、颜色结束的点以及您想要的颜色，并且颜色在它们之间平滑过渡。

色标用于确定哪些颜色将成为渐变的一部分，以及这些颜色将出现在渐变中的什么位置。

在线性渐变中，颜色以直线方式从一种颜色过渡到另一种颜色，因此颜色带沿直线形成，垂直于轴。

在径向渐变中，颜色围绕一个中心圆（或点，它只是一个非常小的圆）并从该中心过渡到渐变的边缘。

这意味着构成渐变的色带在从中心过渡到边缘时会形成越来越大的圆圈。

这里是一个简单的径向渐变示例，从中心的白色过渡到外边缘的黑色。

这是 createRadialGradient 语法的起源。

第一个圆圈将是颜色开始的地方，我们将任意声明它从中心开始......假设是 x:100,y:100

第二个圆圈将是颜色结束的地方，因为我们选择了中心开始它，颜色在圆圈的外边缘结束（尽管这些可以很容易地反转）。

为简单起见，中心点（在这种情况下）将保持不变：x:100,y:100

这些圆之间的真正区别将是半径。由于中心应该很小，我们将其半径设为 1，而圆的较大外半径，我们将设为 100。

这为我们提供了所需的参数：

x = 100;
y = 100;
radiusStart = 1;
radiusEnd = 100;

var grad = ctx.createRadialGradient(x,y,radiusStart,x,y,radiusEnd);

但是，如果我们尝试按原样显示此代码，我们将看不到任何东西......这是因为我们需要颜色停止。

使用两个参数声明色标...色标的位置和颜色。

位置是一个介于 0 和 1 之间的数字，表示从开始到结束的距离的百分比。

如果我们希望颜色从白色开始，那么我们将使用：

grad.addColorStop(0,'#FFFFFF');

这意味着我们的颜色停止从直线的 0% 开始（意思是渐变开始的地方），并将颜色绘制为白色。

同样，第二个渐变应该是黑色的，并且应该放在渐变的最末端：

grad.addColorStop(1,'#000000');

请注意，这些不直接引用上下文......我们引用上下文来创建渐变，但是我们直接将停靠点添加到我们创建的渐变中。

当我们完成创建渐变后，只要我们创建的渐变仍在范围内，我们就可以将此渐变用作填充样式（甚至是描边样式）。

完整代码：

x = 100;
y = 100;
radiusStart = 1;
radiusEnd = 100;

var grad = ctx.createRadialGradient(x,y,radiusStart,x,y,radiusEnd);
grad.addColorStop(0,'#FFFFFF');
grad.addColorStop(1,'#000000');

ctx.beginPath();
ctx.arc(x,y,radiusEnd,0,Math.PI*2,false);
ctx.fillStyle = grad;
ctx.fill();

当你在玩这个时，不要忘记尝试一下。

尝试添加两个以上的色标...这意味着您可以从蓝色过渡到绿色到黄色到橙色到红色到紫色，而不是从黑色过渡到白色（无聊）。

请记住适当地设置位置......例如，如果您有 6 种颜色（如上），并且您希望它们均匀分布，那么您可以将位置设置为 0.2 间隔：

grad.addColorStop(0,'#0000FF');
grad.addColorStop(.2,'#00FF00');
grad.addColorStop(.4,'#FFFF00');
grad.addColorStop(.6,'#FF8800');
grad.addColorStop(.8,'#FF0000');
grad.addColorStop(1,'#AA00AA');

您尝试放置在同一位置的任何颜色停止都会相互覆盖。

另一个很酷的效果是在创建渐变时为圆圈设置两个不同的中心......这为渐变带来了不同的效果，并且可以成为您的武器库中的一个有价值的补充。

这是来自W3C 规范的两个图像（它本身就是HERE）。这两个都是径向梯度，第一和第二个圆的中心点不同。

一个更好的例子是HERE，虽然代码本身是用 svg 编写的 html 背景，但这些例子仍然展示了一些很好的方法来使用具有不同中心的径向渐变。他涵盖了径向梯度的理论，并展示了一些非常好的例子。

最后，一个小窍门……虽然手写渐变是很有可能的，但它有点让人头疼。使用 Photoshop、Illustrator、GIMP 或 Inkscape 并在其中之一中构建渐变通常要容易得多……然后您可以直接调整渐变，直到您喜欢为止。然后只需将色标信息复制到您的画布代码中即可。

希望其中一些对某人有所帮助。

于 2013-09-15T07:38:37.460 回答