噢,我把颜色换成不透明的就没问题了
canvas 安卓 drawImage 异常同样的代码,在编辑器和 iOS 上表现正常,在安卓上会出问题 iOS这样 [图片] 安卓这样 [图片] 不知道是不是我写的代码逻辑有问题,还是系统问题。第一次用 canvas,关键代码如下(用的美团的 mpvue)。 [代码]const ctx = wx.createCanvasContext(canvasId)[代码][代码]// 绘制卡片背景[代码] [代码]this[代码][代码].drawBackground(CW, CH, CTH)[代码] [代码]// 绘制阴影 [代码][代码]this[代码][代码].drawShadow(PX, PY, PW, PH) [代码] [代码]// 绘制封面图[代码] [代码]this[代码][代码].drawWorkCoverImg(res[0].path)[代码] [代码] [代码] ... [代码]drawBackground(cw, ch, cth) {[代码][代码] [代码][代码]// 绘制卡片背景[代码][代码] [代码][代码]ctx.setFillStyle([代码][代码]'#ffffff'[代码][代码])[代码][代码] [代码][代码]ctx.fillRect(0, 0, cw, ch)[代码][代码] [代码][代码]// 绘制上半部分背景[代码][代码] [代码][代码]ctx.setFillStyle([代码][代码]'rgba(255,153,51,0.08)'[代码][代码])[代码][代码] [代码][代码]ctx.fillRect(0, 0, cw, cth)[代码][代码]},[代码][代码]//绘制阴影 [代码][代码]drawShadow(x, y, w, h) {[代码][代码] [代码][代码]ctx.save()[代码][代码] [代码][代码]this[代码][代码].roundRect(x, y, w, h, PR)[代码][代码] [代码][代码]ctx.setFillStyle([代码][代码]'rgba(255,153,51, 1)'[代码][代码])[代码][代码] [代码][代码]ctx.setShadow(0, 0, 4, [代码][代码]'rgba(255,153,51, 0.2)'[代码][代码])[代码][代码] [代码][代码]ctx.fill()[代码][代码] [代码][代码]ctx.restore()[代码][代码]},[代码][代码]//绘制作品封面[代码][代码]drawWorkCoverImg(path) {[代码][代码] [代码][代码]ctx.save()[代码][代码] [代码][代码]this[代码][代码].roundRect(PX, PY, PW, PH, PR)[代码][代码] [代码][代码]ctx.clip()[代码][代码] [代码][代码]ctx.drawImage(path, PX, PY, PW, PH);[代码][代码] [代码][代码]ctx.restore()[代码][代码]},[代码][代码]roundRect(x, y, w, h, r) {[代码][代码] [代码][代码]ctx.beginPath()[代码][代码] [代码][代码]ctx.moveTo(x + r, y)[代码][代码] [代码][代码]ctx.lineTo(x + w - r, y)[代码][代码] [代码][代码]ctx.arcTo(x + w, y, x + w, y + r, r)[代码][代码] [代码][代码]ctx.lineTo(x + w, y + h - r)[代码][代码] [代码][代码]ctx.arcTo(x + w, y + h, x + w - r, y + h, r)[代码][代码] [代码][代码]ctx.lineTo(x + r, y + h)[代码][代码] [代码][代码]ctx.arcTo(x, y + h, x, y + h - r, r)[代码][代码] [代码][代码]ctx.lineTo(x, y + r)[代码][代码] [代码][代码]ctx.arcTo(x, y, x + r, y, r)[代码][代码] [代码][代码]ctx.closePath()[代码][代码]},[代码]
2018-07-26