canvas用arc画圆安卓显示问题,获取微信头像不显示问题
代码如下: onLoad(options) { const height = app.globalData.window_height; const width = app.globalData.window_width; const options = { head_photo = 'https://wx.qlogo.cn/mmopen/vi_32/N78NX78hLfDwG56Ocyyjhibqro6sFjIZmUzJM5aI90ySicyqMeRToKLImXl7v8DRVwMmVggfMzy1m15d2P5beejg/0', qrcode='http://oixavq5ec.bkt.clouddn.com/yaliapi/1302/wechat/b07f9201804161810206895.png' } if (options) { const optionsArr = Object.keys(options).filter(x => x != 'nickname'); optionsArr.map((x, k) => { if (x == 'head_photo' || x == 'qrcode') { this.downloadCanvasImg(x, options[x], (optionsArr.length - 1 == k ? true : false)) } }) } }, downloadCanvasImg(name, url, end) { const options = immutable.fromJS(this.data.options).toJS(); wx.downloadFile({ url, success: res => { const urls = res.tempFilePath; options[name] = urls; this.setData({ options }) console.log(name, url, end, urls); if (end) { this.drawCanvas(this.data.options); } }, fail: fres => { this.downloadCanvasImg(options, end) } }) }, drawCanvas(options) { const { width, height, backgroundColor } = this.data; const imgUrl = options.head_photo; const qrcodeUrl = options.qrcode const ctx = wx.createCanvasContext('myCanvas'); const grd = ctx.createLinearGradient(0, 0, 0, 160) // grd.addColorStop(0, this.colorRgb(backgroundColor)) // grd.addColorStop(.2, this.colorRgb(backgroundColor)) // grd.addColorStop(1, this.colorRgb(backgroundColor, true)) grd.addColorStop(0, '#16ca4e') grd.addColorStop(.2, '#16ca4e') grd.addColorStop(1, '#16ca4e') ctx.beginPath() ctx.arc(width / 2, -180, width / 2 + 200, 2 * Math.PI) // height: width / 2 + 20 ctx.fillStyle = grd ctx.fill() ctx.closePath() ctx.beginPath() ctx.setFillStyle('#ffffff') ctx.setTextAlign('center') ctx.setFontSize(55) ctx.fillText('佣金升级', width / 2, 80) ctx.fillText('福利双赢', width / 2, 130) ctx.setTextAlign('center') ctx.closePath() ctx.save() ctx.beginPath(); ctx.setFillStyle('white'); ctx.setShadow(0, 2, 5, 'rgba(0, 0, 0, .2)') ctx.arc(width / 2, width / 2 + 20, 40, 0, 2 * Math.PI); ctx.fill(); ctx.clip(); ctx.drawImage(imgUrl, width / 2 - 40, width / 2 - 20, 80, 80) ctx.restore() ctx.closePath() ctx.beginPath() ctx.arc(width / 2, 280, 50, 2 * Math.PI) ctx.setFillStyle('red') ctx.fill() ctx.closePath() ctx.beginPath() ctx.setFillStyle('#333') ctx.setTextAlign('center') ctx.setFontSize(16) ctx.fillText('MaobabyDad', width / 2, width / 2 + 80) ctx.setTextAlign('center') ctx.closePath() ctx.beginPath() const grd2 = ctx.createCircularGradient(width / 2, width / 2 + 195, 127) grd2.addColorStop(0, '#16ca4e') grd2.addColorStop(.9, '#16ca4e') grd2.addColorStop(1, '#16ca4e') ctx.rect(width / 2 - 90, width / 2 + 105, 180, 180) ctx.setFillStyle(grd2) ctx.closePath() ctx.beginPath() const qrcode = ctx.drawImage(qrcodeUrl, width / 2 - 80, width / 2 + 115, 160, 160) ctx.closePath() ctx.beginPath() ctx.setFillStyle('#333') ctx.setTextAlign('center') ctx.setFontSize(16) ctx.fillText('将海报发送给好友,赚取佣金', width / 2, width / 2 + 330) ctx.setTextAlign('center') ctx.closePath() ctx.draw() }, 开发工具的效果是: [图片] 安卓(小米)机上的效果: [图片] 苹果(6sp)真机效果: [图片]