- canvas 绘制圆形进度条偶尔不显示,华为meta20、荣耀V20出现问题
https://developers.weixin.qq.com/s/rwkm1pmR7B9q 这是示例代码片段,用华为meta20、荣耀V20手机验证了问题可以复现,哪位大神知道什么原因给解决下,不胜感激
2019-06-27 - 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上发现这种问题,模拟机和其它手机都没这种问题
2019-06-25