问createRadialGradient()和addColorStop()方法是如何工作的？

EN

是的，我知道这是死亡的.但这似乎是一个有效的问题，从来没有被套住，所以我把它留在这里，以防其他人需要它。

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

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

在任何渐变中，您都可以拾取颜色的起始点、颜色的结束点和所需的颜色，然后颜色在它们之间平滑过渡。

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

在线性渐变中，颜色在一条直线上从一种颜色过渡到下一种颜色，以便沿着直线形成垂直于轴的色带。

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

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

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

这是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');

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

当我们创建完渐变后，只要我们创建的渐变仍然在作用域内，我们就可以将这个渐变用作fillStyle (甚至是strokeStyle)。

完整代码：

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种颜色，例如(如上所述)，并且希望它们均匀分布，则应按.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');

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

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

HERE是来自W3C规范(本身就是HERE)的两个映像。这两个都是径向渐变，第一个和第二个圆的中心点不同。

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

最后，小贴士..。虽然手动编写渐变是很有可能的，但这是一种痛苦的事情。获取Photoshop、Illustrator、GIMP或Inkscape并在其中一个中构建渐变通常要容易得多。然后，您可以直接调整渐变，直到您喜欢它。然后，只需将色标信息复制到您的画布代码中。

希望这能帮助到一些人。