• 当前 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);

}

})