小程序Canvas绘制时安卓和iOS的坑

小程序Canvas绘制时安卓和iOS的坑

使用Canvas绘制时，测试中发现iOS和开发环境中使用正常的CanvasContext.setFillStyle(‘transparent’)方法，在安卓机中无法正常使用，会导致Canvas绘制的内容无法正常显示，显示内容为空白图。具体代码如下：

/**

• 绘制圆角矩形Canvas
  */
  roundRect(ctx, x, y, w, h, r) {
  // 开始绘制
  ctx.beginPath()
  // 因为边缘描边存在锯齿，最好指定使用 transparent 填充
  ctx.setFillStyle(‘transparent’)
  // ctx.setStrokeStyle(‘transparent’)
  // 绘制左上角圆弧
  ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)

  // 绘制border-top
  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)

  // 绘制border-right
  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)

  // 绘制border-bottom
  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)

  // 绘制border-left
  ctx.lineTo(x, y + r)
  ctx.lineTo(x + r, y)

  ctx.fill()
  // ctx.stroke()
  ctx.closePath()
  // 剪切
  ctx.clip()
  },