收藏
回答

canvas 安卓 drawImage 异常

问题模块 框架类型 问题类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
API和组件 小程序 Bug canvasContext.drawImage 客户端 Android 6.6.7 2.2.1

同样的代码,在编辑器和 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
回答关注问题邀请回答
收藏

1 个回答

  • 张++
    张++
    2018-07-26

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

    2018-07-26
    赞同
    回复
登录 后发表内容