createRadialGradient（创建路径样式对象）

Created: November-22, 2018

var gradient = createRadialGradient( 
      centerX1, centerY1, radius1,     // this is the "display' circle
      centerX2, centerY2, radius2      // this is the "light casting" circle
)
gradient.addColorStop(gradientPercentPosition, CssColor)
gradient.addColorStop(gradientPercentPosition, CssColor)
[optionally add more color stops to add to the variety of the gradient]

创建可重用的径向渐变（对象）。渐变对象是一个对象，你可以使用（并重复使用！）使你的路径笔触和填充变为渐变色。

关于…

Canvas 径向渐变与传统的径向渐变极为不同。

Canvas 的径向渐变的官方（几乎无法解读！）定义位于此帖的底部。如果你的性格薄弱，不要看它！

在（几乎可以理解）术语中：

径向渐变具有 2 个圆：转换圆和显示圆。
转换圈将光投射到显示圈中。
那光是渐变。
该渐变光的形状由两个圆的相对大小和位置确定。

创建渐变对象分为两步：

创建渐变对象本身。在创建过程中，你将在画布上定义一条渐变开始和结束的线。使用 var gradient = context.radialLinearGradient 创建渐变对象。
然后添加构成渐变的 2 种（或更多）颜色。这是通过使用 gradient.addColorStop 向渐变对象添加多个色标来完成的。

参数：

centerX1，centerY1，radius1 定义将显示渐变的第一个圆。
centerX2，centerY2，radius2 定义了第二个圆，它将渐变光投射到第一个圆中。
gradientPercentPosition 是分配给色标的 0.00 到 1.00 之间的浮点数。它基本上是一个百分比航点，用于定义此特定颜色停止沿梯度应用的位置。
- 渐变开始于百分比 0.00。
- 渐变以百分比 1.00 结束。
- 技术说明： 术语百分比在技术上并不正确，因为值从 0.00 到 1.00 而不是 0％到 100％。
CssColor 是分配给此特定色块的 CSS 颜色。

侧注： 渐变对象不是 Canvas 元素的内部对象，也不是 Context。它是一个独立且可重用的 JavaScript 对象，你可以将其分配给你想要的任何路径。你甚至可以使用此对象为不同 Canvas 元素上的 Path 着色（！）

颜色停止是沿着渐变线的（百分比）航点。在每个颜色停止航点上，梯度完全（==不透明）着色，并带有指定的颜色。沿着色标之间的渐变线的中间点被着色为该色和前一色的渐变。

有关 Canvas 渐变的重要提示！

创建渐变对象时，整个径向渐变将无形地投射到画布上。

当你通过一条路径时，会发现不可见的渐变，但只会在被抚摸或填充的路径上显露出来。

如果你创建一个绿色到红色的径向渐变，如下所示：

 // create a radialGradient
 var x1=150;
 var y1=150;
 var x2=280;
 var y2=150;
 var r1=100;
 var r2=120;
 var gradient=ctx.createRadialGradient(x1,y1,r1,x2,y2,r2);
 gradient.addColorStop(0,'red');
 gradient.addColorStop(1,'green');
 ctx.fillStyle=gradient;

然后 Canvas 将无形地看到你的渐变创作，如下所示：

StackOverflow 文档

但是直到你使用渐变的 stroke() 或 fill()，你才会在 Canvas 上看到任何渐变。
最后，如果使用渐变描边或填充路径，隐形渐变在画布上变得可见…但仅限于绘制路径的位置。

StackOverflow 文档

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; padding:10px; }
    #canvas{border:1px solid blue; }
</style>
<script>
window.onload=(function(){

    // canvas related vars
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    
    // create a radial gradient
    var x1=150;
    var y1=175;
    var x2=350;
    var y2=175;
    var r1=100;
    var r2=40;
    x2=x1;
    var gradient=ctx.createRadialGradient(x1,y1,r1,x2,y2,r2);
    gradient.addColorStop(0,'red');
    gradient.addColorStop(1,'green');
    ctx.fillStyle=gradient;

    // fill a path with the gradient
    ctx.beginPath();
    ctx.moveTo(150,0);
    ctx.lineTo(300,150);
    ctx.lineTo(150,325);
    ctx.lineTo(0,150);
    ctx.lineTo(150,0);
    ctx.fill();

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=300 height=325></canvas>
</body>
</html>

可怕的官方细节

谁决定`createRadialGradient 做什么？

在 W3C 问题的官方建议使用浏览器来构建 HTML5 的 Canvas 元素规范。

createRadialGradient 的 W3C 规范隐藏如下：

`createRadialGradient` 创造了什么

createRadialGradient …有效地创建一个锥体，由渐变的创建中定义的两个圆圈触摸，锥体的一部分在起始圆圈（0.0）之前使用第一个偏移的颜色，锥体的一部分在结束圆圈之后（1.0）使用最后一个偏移的颜色，并且锥体外的区域不受渐变（透明黑色）的影响。

它是如何在内部工作的

createRadialGradient(x0, y0, r0, x1, y1, r1) 方法有六个参数，前三个表示原点(x0, y0)和半径 r0 的起始圆，后三个表示带原点(x1, y1)和半径 r1 的结束圆。值以坐标空间单位表示。如果 r0 或 r1 中的任何一个为负数，则必须抛出 IndexSizeError 异常。否则，该方法必须返回使用两个指定的圆初始化的径向 CanvasGradient。

必须通过以下步骤呈现径向渐变：

如果 x0 = x1 且 y0 = y1 且 r0 = r1，则径向渐变必须不绘制任何内容。中止这些步骤。

设 x（ω）=（x1-x0）ω+ x0; 设 y（ω）=（y1-y0）ω+ y0; 令 r（ω）=（r1-r0）ω+ r0 令ω处的颜色为梯度上该位置的颜色（颜色来自上述插值和外推）。

对于ω的所有值，其中 r（ω）> 0，从最接近正无穷大的ω值开始，以最接近负无穷大的ω值结束，在位置绘制半径为 r（ω）的圆周（ x（ω），y（ω）），颜色为ω，但仅绘制画布上尚未在此步骤中用于渲染渐变的早期圆圈所绘制的部分。

关于…

有关 Canvas 渐变的重要提示！

可怕的官方细节

谁决定`createRadialGradient 做什么？

createRadialGradient 创造了什么

它是如何在内部工作的

`createRadialGradient` 创造了什么