为什么HTML Canvas中for循环无法绘制多个重复圆形，仅显示单个大圆？

Canvas 2D上下文的路径是全局累积的，你没有在每次绘制新圆形前重置路径：

• 每次调用context.arc()都会往当前全局路径中追加新的子路径
• 每次执行context.fill()都会填充当前全局路径内的所有图形，后续的填充会直接覆盖之前所有路径的填充效果
• 迭代到最后时全局路径里已经包含了10个不同半径的同心圆，最后一次填充会把所有图形统一填为最后一次设置的颜色，半径最大的圆形会完全覆盖住更小的圆形，所以你只能看到一个大圆。

在循环内每次绘制圆形前，调用context.beginPath()重置当前路径即可，修正后的代码如下：

<html>
<body>
    <canvas width = "1200" height = "1200"> </canvas>

    <script>
        let canvas = document.querySelector('canvas');
        let context = canvas.getContext('2d');

        context.fillStyle = '#5bd75b';
        context.fillRect(0, 0, 1200, 1200);

        let radius = 500;
        for (let i = 1; i <= 10; i++)
        {
          // 新增这行，重置当前路径
          context.beginPath();
          if (Math.random() >= 0.5)
          {
            context.fillStyle = 'yellow';
          }
          else
          {
            context.fillStyle = 'red';
          }
          context.arc(600, 600, radius / i, 0, Math.PI * 2);
          context.fill(); 
         }
    </script>
</body>
</html>

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