小程序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()
},