收藏
回答

真机调试滚动屏幕后Canvas画图混乱,这个是bug还是我的代码有问题?

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小程序 Bug Canvas 工具 6.7.2 2.3.0 [170]

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

}

})


最后一次编辑于  2018-09-26  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

4 个回答

  • 是柿子啊
    是柿子啊
    2018-09-26

    原生组件不支持position:absolute定位

    2018-09-26
    赞同
    回复 1
    • ~
      ~
      2018-09-27

      position:absolute属性去掉了也不好使呢

      画出来的圈还是跟着屏幕划上去了~ 画布还在下面呢

      如何把这个圈固定在底端呢?

      2018-09-27
      赞同 11
      回复
  • 🚗🚕🚙🚌🚎🚒🚐🚚
    🚗🚕🚙🚌🚎🚒🚐🚚
    2018-09-27

    画图的位置单位是像素,canvas的宽高你用的是什么单位,长度有做转换?做屏幕大小适配了?

    2018-09-27
    赞同
    回复 1
    • I-S
      I-S
      1天前
      乱说
      1天前
      赞同
      回复