使用 JavaScript 的圓的隨機徑向漸變顏色

Question

我是 Javascript 的新手。我正在嘗試創建一個在一個色標上填充白色的圓圈，並為第二個色標創建一個隨機顏色，以創建徑向漸變效果。 但是，我收到此錯誤：未捕獲 DOMException：無法在“CanvasGradient”上執行“addColorStop”：提供的值（“未定義”）無法解析為顏色。

我將不勝感激任何建議。

我試着把它分成兩步。

第一步是創建一個充滿兩個 colors（白色：內部，粉色：外部）的圓圈，以創建我所做的徑向漸變效果。
https://jsfiddle.net/RE006/sv8guk62/103/

第二步：這是我遇到問題的地方： https://jsfiddle.net/RE006/sv8guk62/105/

我的目標是創建一個由兩個 colors（白色：內部，隨機顏色：外部）填充的圓圈，以創建徑向漸變效果。

錯誤：未捕獲的 DOMException：無法在“CanvasGradient”上執行“addColorStop”：提供的值（“未定義”）無法解析為顏色。

HTML：

<canvas id="circle"></canvas>

腳本：

document.addEventListener('DOMContentLoaded', function() {
    var c =   document.getElementById("circle");
    var ctx = c.getContext("2d");

    //Arc(x, y, width, height, startAngle, arcAngle) 
    fillArc(100, 70, 70, 0, 6.28);

    function fillArc() {
       ctx.beginPath();
       ctx.arc.apply(ctx, arguments);
     }


    function newGradient() {
        var randomColor1 = "#" + Math.floor(Math.random()*16777215).toString(16);
     }

    // Create gradient
    // (x0,y0,r0 (starting circle),x1,y1, r1(ending circle))
    var grd = ctx.createRadialGradient(100,60,5,100,60,50);
        grd.addColorStop(0,"white");
        grd.addColorStop(1,newGradient());

    // Fill with gradient
    ctx.fillStyle = grd;
    ctx.fill();
 });

Answer 1

在 newGradient function 你忘了返回值