canvas 安卓 drawImage 异常
同样的代码,在编辑器和 iOS 上表现正常,在安卓上会出问题
iOS这样
安卓这样
不知道是不是我写的代码逻辑有问题,还是系统问题。第一次用 canvas,关键代码如下(用的美团的 mpvue)。
const ctx = wx.createCanvasContext(canvasId) |
|
... |
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()}, |
