使用JavaScript实现圆形随机径向渐变报错求助

错误原因 #

你遇到的Uncaught DOMException错误，核心问题是newGradient()函数没有返回值——函数内部只定义了randomColor1变量但没把它返回出去，导致调用newGradient()时默认返回undefined，而addColorStop无法将undefined解析为合法的颜色值。

修正方案 #

1. 给newGradient()添加返回语句，让它返回生成的随机十六进制颜色
2. 可选：补全随机颜色的位数，避免出现不足6位的十六进制值（比如生成的随机数转十六进制后只有5位，会导致颜色格式不合法）

修正后的完整代码 #

HTML

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

JavaScript

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

    //Arc(x, y, radius, startAngle, endAngle) 
    fillArc(100, 70, 70, 0, 6.28);

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

    function newGradient() {
        // 生成随机十六进制颜色，并用padStart确保是6位
        var randomColor1 = "#" + Math.floor(Math.random()*16777215).toString(16).padStart(6, '0');
        return randomColor1; // 返回生成的颜色
    }

    // 创建径向渐变
    var grd = ctx.createRadialGradient(100,60,5,100,60,50);
    grd.addColorStop(0,"white");
    grd.addColorStop(1,newGradient()); // 现在能拿到合法的随机颜色

    // 用渐变填充
    ctx.fillStyle = grd;
    ctx.fill();
 });

额外说明 #

Math.floor(Math.random()*16777215)生成的是0到16777214之间的整数，转十六进制后可能出现长度不足6位的情况（比如数值10转十六进制是a），用padStart(6, '0')可以在字符串前面补零，确保最终颜色是标准的6位十六进制格式，避免出现意外的颜色解析错误。

内容的提问来源于stack exchange，提问作者user18262158