各位大佬,辛苦帮忙看看。这个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();
},
});
尽可能的用真机调试。开发者工具有各种问题