各位大佬，辛苦帮忙看看。这个canvas，我是自己参照网上写了一个运动小球的效果。但是只要我添加小球100以上，过一段时间电脑都卡的不能动了。

我把代码直接贴出来了，不知道是不是代码哪里写的有问题，希望给小弟指点一下！ 感谢！

<!--index.wxml-->
<view class="move-ball-box">
  运动的小球
  <canvas type='2d' id="canvas-ball" style="border: 1rpx solid; width: 750rpx; height: 800rpx;" />
  <van-button bindtap="setBall" type="primary">开始</van-button>
  <van-button bindtap="stopBall" type="primary">暂停</van-button>
  <van-button type="primary">新增小球</van-button>
  <van-button type="primary">删除小球</van-button>
</view>

// index.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    canvasNode: null,  // canvas 节点
    canvasWidth: 0,
    canvasHeight: 0,
    br: 20,
    ballArr: [], // 小球信息
  },


  // 初始化画布
  initCanvas: function () {
    const query = wx.createSelectorQuery(); //创建节点查询器 query
    query.select("#canvas-ball") //选择Id=canvas-ball的节点
      .fields({
        id: true, // 包含id值
        node: true, // 包含node节点， 具体不是很清楚
        size: true,
      })
      .exec((res) => {
        const canvas = res[0].node;
        const cvs = canvas.getContext("2d");
        const dpr = wx.getSystemInfoSync().pixelRatio; // 设备分辨率
        canvas.width = res[0].width * dpr; // 设置canvas的宽度
        canvas.height = res[0].height * dpr; // 设置canvas的高度
        cvs.scale(dpr, dpr); // 缩放

        this.setData({
          canvasNode: res,
          canvasWidth: res[0].width,
          canvasHeight: res[0].height,
        });

        this.initBall(100);
        this.setBall();
      });
  },

  // 初始化小球
  initBall: function (num) {
    const arr = new Array(num);
    const ballArr = [];
        // 数组填充
    arr.fill(1).forEach(() => {
      const { canvasNode } = this.data;
      const siteX = parseInt(Math.random() * canvasNode[0].width + 1, 10); // x轴小球随机位置
      const siteY = parseInt(Math.random() * canvasNode[0].height + 1, 10); // y轴小球随机位置
      const bx = Math.random() * 8 - 4; // 小球x轴运动速度
      const by = Math.random() * 8 - 4; // 小球y轴运动速度
      const r = parseInt(Math.random() * 8 + 8, 10); // 小球半径
      const c = `rgb(${parseInt(Math.random() * 255 + 1, 10)}, ${parseInt(Math.random() * 255 + 1, 10)}, ${parseInt(Math.random() * 255 + 1, 10)})`
      ballArr.push({ siteX, siteY, bx, by, r, c });
    });

    this.setData({
      ballArr,
    });
  },

  /**
   * 设置小球
  */
  setBall: function () {
    const { canvasNode, ballArr, canvasWidth, canvasHeight } = this.data;
    const canvas = canvasNode[0].node;
    const cvs = canvas.getContext("2d");

    const dprw = wx.getSystemInfoSync().screenWidth; // 获取设备宽度
    const zw = dprw / 375; // 自适应设备

    clearInterval(this.interTime);
    this.interTime = setInterval(() => {
      cvs.clearRect(0, 0, canvasWidth, canvasHeight); // 清除画布

      ballArr.forEach((item, index) => {
        this.moveBall(cvs, zw, item.siteX, item.siteY, item.bx, item.by, item.r, item.c, index);
      })
    }, 16);
  },

    // 小球移动
  moveBall: function (cvs, zw, siteX, siteY, bx, by, r, c, index) {
    const { canvasWidth, canvasHeight } = this.data;

    this.setData({
      [`ballArr[${index}].siteX`]: siteX + bx,
      [`ballArr[${index}].siteY`]: siteY + by,
    });

    if (siteX <= 0) {
      this.setData({
        [`ballArr[${index}].bx`]: Math.abs(bx),
      });
    }

    if (siteY <= 0) {
      this.setData({
        [`ballArr[${index}].by`]: Math.abs(by),
      });
    }

    if (siteX >= canvasWidth) {
      this.setData({
        [`ballArr[${index}].bx`]: -Math.abs(bx),
      });
    }

    if (siteY >= canvasHeight) {
      this.setData({
        [`ballArr[${index}].by`]: -Math.abs(by),
      });
    }

    cvs.beginPath();
    cvs.arc(siteX * zw, siteY * zw, r, 0, 2 * Math.PI);
    cvs.fillStyle = c;
    cvs.fill();
    cvs.closePath();
  },


  // 小球暂停
  stopBall: function () {
    clearInterval(this.interTime);
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function () {
    this.initCanvas();
  },
});