- 当前 Bug 的表现（可附上截图） 用Canvas写了一个倒计时动画，固定在屏幕底端，不跟屏幕一起滑动。 在工具上调试一切正常，但是到真机上就完全乱了，画出来的圆圈会跟着屏幕一起往上滑，但是画布没有动。 这是代码写的有问题还是程序bug呢？ 如图： [图片]  [图片] - 预期表现 画出的圆圈在画布上，不随屏幕滑动。 - 复现路径 - 提供一个最简复现 Demo ***************************************************** wxml***************************************************************** <view > <text class='test'>啊</text> <text class='test'>啊</text> <text class='test'>啊</text> <text class='test'>啊</text> <text class='test'>啊</text> <text class='test'>啊</text> <text class='test'>啊</text> <text class='test'>啊</text> <text class='test'>啊</text> <text class='test'>啊</text> <text class='test'>啊</text> <text class='test'>啊</text> <view class="bottom_box"> <view class='bottom_time'> <canvas class='circle' canvas-id="canvasTime"></canvas> <canvas class='circle' canvas-id="canvasTime_cover"></canvas> <text>5秒</text> </view> </view> </view> *****************************************************wxss******************************************************************** .test{ font-size: 5rem; display: block; } .bottom_box{ width: 100%; height: 5.2rem; position: fixed; bottom:1.5rem; display: flex; flex-direction:row; justify-content: space-around; } .bottom_time{ width: 30%; height: 100%; position:relative; background-color: #fff; border-radius: 100%; } .bottom_time text{ line-height: 5.2rem; height: 5.2rem; width: 100%; margin-left: 38.5%; color: #646464; } .circle { position:absolute; height: 100%; width: 100%; } *******************************************************js****************************************************** Page({ data: { }, onReady: function () { var that = this; var query = wx.createSelectorQuery(); query.select('.bottom_time').boundingClientRect() query.exec(function (res) { var x = res[0].width / 2; var y = res[0].height / 2; var radius = y - 5; var cxt_arc = wx.createCanvasContext("canvasTime"); cxt_arc.setLineWidth(5); cxt_arc.setStrokeStyle('#eaeaea'); cxt_arc.setLineCap('round'); cxt_arc.beginPath(); cxt_arc.arc(x, y, radius, 0, 2 * Math.PI, false); cxt_arc.stroke(); cxt_arc.draw(); that.drawCircle(x, y, radius) }) }, drawCircle: function (x, y, radius) { var interval; var varName; var ctx = wx.createCanvasContext('canvasTime_cover'); clearInterval(varName); function drawArc(s, e) { ctx.setFillStyle('white'); ctx.clearRect(0, 0, 100, 100); ctx.draw(); ctx.setLineWidth(5); ctx.setStrokeStyle('#009999'); ctx.setLineCap('round'); ctx.beginPath(); ctx.arc(x, y, radius, s, e, false); ctx.stroke() ctx.draw() } var step = 1, startAngle = 1.5 * Math.PI, endAngle = 0; var animation_interval = 1000, n = 60; var animation = function () { if (step <= n) { endAngle = step * 2 * Math.PI / n + 1.5 * Math.PI; drawArc(startAngle, endAngle); step++; } else { clearInterval(varName); } }; varName = setInterval(animation, animation_interval); } })