- 微信左上角的关闭按钮可以自定义吗?
1、微信浏览器 打开h5页面,切换页面之后,左上角一直是×,可以让这个×变成返回的箭头(<)吗? 2、有的能变成返回的箭头(<),是因为是小程序吗? 微信自动识别的? 是不是h5不能变成返回按钮? 在下小白一个,还希望各位大佬指点一下,十分感谢 ~
2022-03-08 - 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: { 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(); }, }); [图片]
2021-12-20