使用 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 你忘了返回值