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` 創造了什麼