公告列表
公告列表
收藏
回答

canvas 绘制圆形进度条偶尔不显示，华为meta20手机上偶尔出现这种问题

// components/Canvas/canvas.js

Component({

/**

  * 组件的属性列表

  */

properties: {

ProgressbgId: {

type: String,

value: "1"

},

ProgressId: {

type: String,

value: "2"

},

num: {

type: Number,

value: 65

},

size:{

type:Number,

value:50

},

circle:{

type: Number,

value:44

},

width:{

type:Number,

value:100

},

type:{

type:Boolean,

value:true

}

},


/**

  * 组件的初始数据

  */

data: {

num:0,

ProgressbgId: '',

ProgressId: '',

},


/**

  * 组件的方法列表

  */

methods: {

drawProgressbg() {

const ctx = wx.createCanvasContext(this.data.ProgressbgId, this)

ctx.setLineWidth(7); // 设置圆环的宽度

ctx.setStrokeStyle('#EEF0F5'); // 设置圆环的颜色

ctx.setLineCap('round') // 设置圆环端点的形状

ctx.beginPath(); //开始一个新的路径

ctx.arc(this.data.size, this.data.size, this.data.circle, 0, 2 * Math.PI, false);

ctx.stroke(); //对当前路径进行描边

ctx.draw();

ctx.closePath();

},

drawCircle: function () {

let cirl = Math.PI * 2

let quart = Math.PI / 2

var context = wx.createCanvasContext(this.data.ProgressId, this);

const grd = context.createLinearGradient(0,0,100,100)


if(this.data.type){

grd.addColorStop(0, '#667EFF')

grd.addColorStop(0.5, '#8F5AE8')

grd.addColorStop(1, '#A646DB')

}else{

grd.addColorStop(0, '#24D8ED')

grd.addColorStop(1, '#4A67FB')

}


context.setLineWidth(7);

context.setStrokeStyle(grd);

context.setLineCap('round')

context.beginPath();

context.arc(this.data.size, this.data.size, this.data.circle, -quart, ((cirl) * this.data.num / 100) - quart, false);

context.stroke();

context.draw();

context.closePath();

},

},

ready: function () {

this.drawProgressbg();

this.drawCircle()

},

})



这是公用进度条子组件，目前除了在华为meta20上发现这种问题，模拟机和其它手机都没这种问题

回答关注问题邀请回答
收藏

7 个回答

  • 香车
    香车
    2021-03-02

    一个canvas就可以实现，怎么用了两个呢？

    2021-03-02
    有用
    回复
  • 周耀林
    周耀林
    2019-08-26

    我也遇到这个问题,mate9和p30

    2019-08-26
    有用
    回复
  • 万达
    万达
    2019-08-13

    同样的问题，更坑的是空心矩形，无解context.strokeRect(x, y, w, h)，只能用4条线代替


    同样的问题，更坑的是空心矩形，无解context.strokeRect(x, y, w, h)，只能用4条线代替

    找到了一个解决方案 ，画完以后其实已经画上去了，只是华为手机上的小程序canvas因为某种原因没显示出来，改变下大小就好了，我给宽度+1 然后在-1 就好了


    reSize () {
        var self = this
        var query = wx.createSelectorQuery().in(self)
        query.select('#drawPanel').boundingClientRect(function (size) {
            console.log('reSize===>>>', size)
            self.setData({
                height: size.height + 1 + 'px',
                width: size.width + 1 + 'px'
            })
            console.log('self.data.height', self.data.height)
            console.log('self.data.width', self.data.width)
        }).exec()
    }





    2019-08-13
    有用
    回复
  • 关耳白告予
    关耳白告予
    2019-07-01

    我试了你的代码，应该跟我是同一个问题

    供参考：

    https://developers.weixin.qq.com/community/develop/doc/0008a6dacd0c78b994c85feff53c00



    2019-07-01
    有用
    回复 2
    • 嗜爱年华
      嗜爱年华
      2019-07-10

      延迟1s是可以了，不过时间有点长

      2019-07-10
      赞
      回复
    • 万达
      万达
      2019-08-13
      同样的问题，更坑的是空心矩形，无解context.strokeRect(x, y, w, h)，只能用4条线代替
      2019-08-13
      赞
      回复
  • 顺66666666666
    顺66666666666
    2019-06-27

    我的是荣耀V20的也是执行完draw不显示,界面有刷新才显示

    2019-06-27
    有用
    回复 3
    • 嗜爱年华
      嗜爱年华
      2019-06-27

      有什么解决的方法吗？

      2019-06-27
      赞
      回复
    • 顺66666666666
      顺66666666666
      2019-06-28

      抛弃了canvas，重新用css实现的

      2019-06-28
      赞
      回复
    • 嗜爱年华
      嗜爱年华
      2019-07-10回复顺66666666666

      css有办法实现圆形渐变进度条吗？有例子吗


      2019-07-10
      赞
      回复
  • 嗜爱年华
    嗜爱年华
    2019-06-26

    https://developers.weixin.qq.com/s/rwkm1pmR7B9q

    这是示例代码片段，用华为meta20手机验证了问题可以复现

    2019-06-26
    有用
    回复
  • 是小白啊
    是小白啊
    2019-06-25

    麻烦提供能复现问题的代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html）

    2019-06-25
    有用
    回复 10
    查看更多(5)
请 登录 后发表内容
相关问题
相关文档