以上是android与ios在8.0.35版本中的显示情况,ios在最新微信版本下渐变色消失(第三个图案是纯图片构成),

就电池view代码片段如下:

            const bubble = canvas.createImage()

            bubble.src = '/imgs/battery_bubble.png'

            bubble.onload = () => {

                const hl = canvas.createImage()

                hl.src = '/imgs/battery_power_highlight.png'

                hl.onload = () => {

                    this.roundRect(ctx, renderWidth / 2 - topButtonWidth / 2, 0, topButtonWidth, topButtonHeight, 2, this.data.progress==1?'#36D79C':'#C6D6F0') //  纽扣

                    this.roundRect(ctx, 0, topButtonHeight / 2, renderWidth, renderHeight - topButtonHeight / 2, 6, '#C6D6F0')  //  背景

                    //  前景

                    let grd = ctx.createLinearGradient(renderWidth/2, 0, renderWidth/2, renderHeight)

                    if(this.data.progress > 0.8) {

                        grd.addColorStop(1, '#33EA64FF')

                        grd.addColorStop(0, '#88FE3AFF')

                    }else if(this.data.progress > 0.2){

                        grd.addColorStop(1, '#FFC600FF')

                        grd.addColorStop(0, '#FFA300FF')

                    }else{

                        grd.addColorStop(1, '#FE7C3AFF')

                        grd.addColorStop(0, '#FE543AFF')

                    }

                    let config = { type: 'fill', fillColor: grd, round: { leftTop: this.data.progress>=0.95, leftBottom: true, rightTop: this.data.progress>=0.95, rightBottom: true } }

                    this.roundRect(ctx, 0, topButtonHeight / 2 + (renderHeight - topButtonHeight / 2) * (1 - this.data.progress), renderWidth, (renderHeight - topButtonHeight / 2) * this.data.progress, 6, config)

                    ctx.drawImage(bubble, 0, 0, renderWidth, renderHeight)

                    ctx.drawImage(hl, 0, 0, renderWidth, renderHeight)

                }

            }