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

// 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上发现这种问题，模拟机和其它手机都没这种问题

xiuying17 1楼•5 年前

同样的问题，更坑的是空心矩形，无解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()
}