canvas 安卓 drawImage 异常
发布于 5 年前 作者 yan94 3422 次浏览 来自 问答

同样的代码，在编辑器和 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()
},
1 回复

噢，我把颜色换成不透明的就没问题了

回到顶部