javascript - createRadialGradient()和addColorStop()方法如何工作？

Question

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

Answer 1

是的，我知道这是不可思议的……但是，似乎从未解决过一个有效的问题，因此，如果有人需要它，我就把它留在这里。

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

好吧，渐变是从一种颜色到另一种颜色的平滑过渡。

在任何渐变中，选择一个颜色开始的点，一个颜色结束的点以及所需的颜色，然后颜色在它们之间平滑过渡。

色标在那里确定哪些颜色将成为渐变的一部分，以及这些颜色将出现在渐变的何处。

在线性渐变中，颜色在一条直线上从一种颜色过渡到另一种颜色，从而沿该线形成垂直于轴的色带。

在径向渐变中，颜色将自身环绕在中心圆(或点，它只是一个很小的圆)周围，并从该中心过渡到渐变的边缘。

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

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

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

另一个很酷的效果是在创建渐变时为圆设置了两个不同的中心...这给渐变带来了不同的效果，并且可以为您的武器库增加一些值(value)。

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

更好的示例是HERE，尽管代码本身是用svg编写的，用于html背景，但示例仍显示了一些使用具有不同中心的径向渐变的好方法。他介绍了径向渐变的原理，并展示了一些非常好的示例。

最后，一个提示...虽然可以手动编写渐变，但是这对屁股有点痛苦。通常，捕获Photoshop，Illustrator，GIMP或Inkscape并在其中之一中构建渐变要容易得多，然后可以直接调整渐变，直到喜欢为止。然后只需将色标信息复制到您的 Canvas 代码中即可。

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