什么情况才会出现 canvas 画图不在画布上？
写了这个，但是有一定几率会出现下面的情况，很是无解。想问下，什么情况才会出现 canvas 画图不在画布上？ 一定概率 = 刷新页面10次可能出现一次。 [图片] [代码]datas.forEach((e, index) => {[代码][代码] [代码][代码]_this.drawCircle(e.a * 1 / e.b * 1, [代码][代码]'canvas'[代码] [代码]+ index, e.color)[代码][代码]})[代码][代码]//---------------------[代码] [代码] [代码][代码]drawCircle: [代码][代码]function[代码] [代码](step, id, color) {[代码] [代码] [代码][代码]var[代码] [代码]dpi = [代码][代码]this[代码][代码].format_rpx()[代码][代码] [代码][代码]console.log([代码][代码]'px'[代码][代码], dpi)[代码][代码] [代码] [代码] [代码][代码]var[代码] [代码]ctx = wx.createCanvasContext(id);[代码] [代码] [代码][代码]// 参数step 为绘制的圆环周长，从0到2为一周 。 -Math.PI / 2 将起始角设在12点钟位置 ，结束角 通过改变 step 的值确定[代码] [代码] [代码][代码]// let bengen = (step * 2 - 0.5) * Math.PI;[代码][代码] [代码][代码]if[代码][代码](isNaN(step)){[代码][代码] [代码][代码]step = 1[代码][代码] [代码][代码]}[代码][代码] [代码][代码]let bengen = (step * 2) * Math.PI - Math.PI / 2[代码] [代码] [代码][代码]console.log(step, id, step * 2 - 0.5)[代码][代码] [代码][代码]ctx.beginPath();[代码][代码] [代码][代码]ctx.setLineWidth(dpi.border);[代码][代码] [代码][代码]ctx.setStrokeStyle(color);[代码] [代码] [代码][代码]ctx.arc(dpi.px, dpi.px, dpi.dot, -Math.PI / 2, bengen);[代码] [代码] [代码][代码]ctx.stroke();[代码][代码] [代码][代码]// ctx.draw();[代码] [代码] [代码][代码]ctx.beginPath();[代码][代码] [代码][代码]ctx.setStrokeStyle([代码][代码]'#f0f0f0'[代码][代码]);[代码] [代码] [代码][代码]ctx.arc(dpi.px, dpi.px, dpi.dot, bengen, 1.5 * Math.PI);[代码] [代码] [代码][代码]ctx.stroke();[代码] [代码] [代码][代码]ctx.setFontSize(20)[代码][代码] [代码][代码]ctx.setStrokeStyle([代码][代码]'#666'[代码][代码])[代码][代码] [代码][代码]ctx.setTextBaseline([代码][代码]'middle'[代码][代码])[代码][代码] [代码][代码]ctx.setTextAlign([代码][代码]'center'[代码][代码])[代码][代码] [代码][代码]// 转换百分比[代码][代码] [代码][代码]let num = Math.floor(step * 100) + [代码][代码]'%'[代码][代码] [代码][代码]ctx.fillText(num, dpi.px, dpi.px)[代码][代码] [代码][代码]ctx.draw();[代码][代码] [代码][代码]},[代码]
