canvas 绘制圆角矩形头像在安卓机上大概率无法绘制
发布于 5 年前 作者 pingzhu 10563 次浏览 来自 问答
  • 当前 Bug 的表现（可附上截图）

绘制圆角矩形头像在安卓机上大概率绘制不出， iOS 和开发工具都是正常的

  • 预期表现

预计表现如图所示：

  • 提供一个最简复现 Demo
export function drawRoundRect (ctx, x, y, w, h, r, url) {
  ctx.save()
  ctx.beginPath()
  ctx.setFillStyle('transparent')
  ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)
  ctx.moveTo(x + r, y)
  ctx.lineTo(x + w - r, y)
  ctx.lineTo(x + w, y + r)
  ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)
  ctx.lineTo(x + w, y + h - r)
  ctx.lineTo(x + w - r, y + h)
  ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)
  ctx.lineTo(x + r, y + h)
  ctx.lineTo(x, y + h - r)
  ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)
  ctx.lineTo(x, y + r)
  ctx.lineTo(x + r, y)
  ctx.fill()
  ctx.closePath()
  ctx.clip()
  ctx.drawImage(url, x, y, w, h)
  ctx.restore()
  return ctx
}

后检测出问题是：ctx.setFillStyle(‘transparent’) 

这行代码导致安卓机上大概率绘制不出圆角矩形头像。注释掉就正常了。

该行代码目的：因为边缘描边存在锯齿，最好指定使用 transparent 填充

想请问下具体是什么原因

1 回复

你好，请提供一下出现问题的机型和微信版本，以及能复现问题的简单代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html）。

回到顶部