uniapp h5端canvas绘制

h5端的canvas怎么循环绘制啊？？比如说我想画十个圆。但是我加上for循环也只出来了一个圆

求解。。。。

参考GPT和自己的思路：

在for循环中使用canvas绘制多个圆的代码应该是没有问题的，但可能需要注意以下几点：

1. 每次绘制前，需要清空canvas，否则之前的图形不会被清除而产生叠加效果。

2. 绘制的代码需要放在canvas对象的onload事件回调函数中，以确保canvas已经完全加载。

3. 每次绘制完成后，需要调用canvas对象的toDataURL()方法将canvas转换为图片，否则后续的绘制将会出现错位的情况。

下面是一份示例代码，仅供参考：

<template>
  <canvas id="myCanvas"></canvas>
</template>

<script>
export default {
  mounted() {
    const canvas = document.getElementById('myCanvas');
    const context = canvas.getContext('2d');

    // 确定圆的半径和间隔
    const r = 50;
    const space = 20;

    // 加载完毕后清空画布
    canvas.onload = function() {
      context.clearRect(0, 0, canvas.width, canvas.height);
    };

    for(let i = 0; i < 10; i++) {
      // 计算每个圆的位置
      const x = r + i * (r * 2 + space);
      const y = r + 50;

      // 绘制圆
      context.beginPath();
      context.arc(x, y, r, 0, 2 * Math.PI);
      context.fillStyle = 'red';
      context.fill();
    }

    // 绘制完成后将canvas转换为图片
    canvas.toDataURL();
  }
}
</script>