收藏
回答

canvas动画严重卡顿至电脑卡死?

各位大佬,辛苦帮忙看看。这个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: {
    canvasNodenull,  // canvas 节点
    canvasWidth0,
    canvasHeight0,
    br20,
    ballArr: [], // 小球信息
  },


  // 初始化画布
  initCanvasfunction () {
    const query = wx.createSelectorQuery(); //创建节点查询器 query
    query.select("#canvas-ball"//选择Id=canvas-ball的节点
      .fields({
        idtrue// 包含id值
        nodetrue// 包含node节点, 具体不是很清楚
        sizetrue,
      })
      .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();
      });
  },

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

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

  /**
   * 设置小球
  */
  setBallfunction () {
    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(00, canvasWidth, canvasHeight); // 清除画布

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

    // 小球移动
  moveBallfunction (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, 02 * Math.PI);
    cvs.fillStyle = c;
    cvs.fill();
    cvs.closePath();
  },


  // 小球暂停
  stopBallfunction () {
    clearInterval(this.interTime);
  },

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

最后一次编辑于  2021-12-20
回答关注问题邀请回答
收藏

2 个回答

  • 发飙的蜗牛
    发飙的蜗牛
    2021-12-21

    尽可能的用真机调试。开发者工具有各种问题

    2021-12-21
    有用
    回复
  • Salem🇰🇿
    Salem🇰🇿
    发表于移动端
    2021-12-20
    偷懒路口
    2021-12-20
    有用
    回复
登录 后发表内容