canvas学习02 多个小球动起来

const canvas = document.getElementById("canvas") as HTMLCanvasElement;
    const ctx = canvas.getContext("2d") as CanvasRenderingContext2D;

    class Boll {
      r: number;
      x: number;
      y: number;
      xDir: number;
      yDir: number;
      space: number;
      fillStyle: string;

      constructor() {
        //随机大小
        this.r = randomNum(10, 40);
        //随机位置
        this.x = randomNum(this.r, canvasWidth - this.r);
        this.y = randomNum(this.r, canvasHeight - this.r);
        //随机方向
        this.xDir = randomOne(1, -1);
        this.yDir = randomOne(1, -1);
        //随机速度
        this.space = randomNum(1, 3);
        this.show();
        //随机颜色
        this.fillStyle = randomColor();
      }

      show() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
        ctx.lineWidth = 2;
        ctx.fillStyle = this.fillStyle;
        ctx.fill();
        ctx.closePath();
        this.run();
      }

      private run() {
        if (this.x <= this.r || this.x >= canvasWidth - this.r)
          this.xDir = -this.xDir;
        if (this.y < this.r || this.y > canvasHeight - this.r)
          this.yDir = -this.yDir;

        this.x += this.xDir * this.space;
        this.y += this.yDir * this.space;

        ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
      }
    }

    const bollArr = [];

    for (let i = 0; i < 10; i++) {
      bollArr.push(new Boll());
    }

    (function star() {
      ctx.clearRect(0, 0, canvasWidth, canvasHeight);
      bollArr.forEach(boll => {
        boll.show();
      });
      setTimeout(() => {
        star();
      }, 16);
    })();