//头像矩形方法
drawRoundRect (ctx,r,x,y,w,h,img) {
ctx.save()
if (w < 2 * r) r = w / 2
if (h < 2 * r) r = h / 2
ctx.beginPath()
ctx.moveTo(x+r, y)
ctx.arcTo(x+w, y, x+w, y+h, r)//右上角,设置r为0则变为直角
ctx.arcTo(x+w, y+h, x, y+h, r)//右下角
ctx.arcTo(x, y+h, x, y, r)//左下角
ctx.arcTo(x, y, x+w, y, r)//左上角
ctx.closePath();
ctx.clip()
ctx.drawImage(img, x, y, w, h)
ctx.restore() // 返回上一状态
}
绘制后在画布中调用
//画头像,这里画矩形图
var r = 10*rpx
var x = 45*rpx
var y = 805*rpx
var w = 50*rpx
var h = 50*rpx
that.drawRoundRect(ctx,r,x,y,w,h,getheadImgUrlInfo)
出现的问题是图片被切成不规则的图案
错误的效果
其他大部分机型都没问题,目前就华为P30 pro遇见了这个问题
正确的效果
用这个画图看下。
https://developers.weixin.qq.com/community/develop/article/doc/000ac686c5c5506f18b87ee825b013