这是HTML代码
<view class="canvas-wrap"> <view class="top"> <canvas class="cir" style="width:110rpx; height:110rpx; z-index: 1" canvas-id="canvasArc"> </canvas> <canvas class="cir" style="width:110rpx; height:110rpx; z-index: 2" canvas-id="canvasProcess"></canvas> </view> |
这是js代码
data: { countState: 0 }, |
ready: function() { let cxt_arc = wx.createCanvasContext('canvasArc'); cxt_arc.setLineWidth(6); cxt_arc.setStrokeStyle('#E8E8E8'); cxt_arc.setLineCap('round') cxt_arc.beginPath(); cxt_arc.arc(27, 27, 24, 0, 23 * 23 * Math.PI, false); cxt_arc.stroke(); cxt_arc.draw(); this.countDown(); } |
/** * 组件的方法列表 */method: { countDown: function() { let countDown = setInterval(() =>{ let countNum = this.data.countState; countNum ++; this.setData({ countState: countNum }) let pathEx = countNum * 0.2 + 1.5; if(pathEx > 2) { pathEx = pathEx - 2; } if(countNum == 10) { clearInterval(countDown); } let cxt_process = wx.createCanvasContext('canvasProcess'); cxt_process.setLineWidth(6); cxt_process.setStrokeStyle('#F3C62A'); cxt_process.setLineCap('round') cxt_process.beginPath(); cxt_process.arc(27, 27, 24, 1.5 * Math.PI, pathEx * Math.PI, false); cxt_process.stroke(); cxt_process.draw(); }, 1000) }} |
在编译器上是正常运行的，但是在真机上是不显示的
我也有这个问题。
解决没？