JS脚本致页面崩溃排查：Canvas绘制指定范围圆形求助

你的推测完全正确，页面崩溃确实由那两个while循环导致，核心问题有两点：

1. 循环条件误用了赋值运算符=而非比较运算符==，fcxwh = 1会始终返回true，循环无限执行（除非某次随机值刚好满足条件，但存在一直不命中导致卡死的概率）；
2. 通过循环筛选符合范围的随机数效率极低，属于完全没必要的冗余逻辑。

修复后的完整代码 #

<body>
    <canvas id=myCanvas width=380 height=380 style="background-color: red;"> </canvas>

    <script>
    function fc(x, y, radius) {
        ctx.beginPath();
        ctx.arc(x, y, radius, 0, Math.PI * 2);
        ctx.fill();
    }

    // 生成指定区间的随机整数 [min, max]
    function RandInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    
    var ctx = myCanvas.getContext("2d");

    // 直接绘制4个符合要求的圆形
    for (var i = 0; i < 4; i++) {
        // 半径范围13-40px
        var radius = RandInt(13, 40);
        // X、Y坐标范围8-180px
        var x = RandInt(8, 180);
        var y = RandInt(8, 180);
        fc(x, y, radius);
    }
    </script>
</body>

关键修改说明 #

• 重写RandInt函数，支持直接传入最小、最大值，一步生成指定区间的随机整数，彻底移除低效的循环筛选逻辑；
• 用更直观的for循环替代原while循环，直接控制绘制4个圆形，代码逻辑更清晰；
• 消除了无限循环的风险，同时完全满足你对圆形坐标、半径的范围要求。

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