canva画图 图片居中裁剪_小程序canvas绘制圆形图片并且居中

在canvas画布中绘制圆形头像居中显示是比较常见的，直接上代码：

假设已经设置好了canvas的宽高；

// 先封装一个请求图片的方法。

methods: {

getNetworkImage(url) {

return new Promise((resolve,reject) => {

uni.downloadFile({

url,

success: (e) => {

const p = e.tempFilePath

if (p.indexOf('json') > -1) {

reject(p)

return false

}

resolve(p)

},

fail: (r) => {

reject(r)

}

})

})

},

}

// 绘制头像

const drawAvatar = (avatarUrl) => {

const avatarWidth = ctx.width * 0.15

const avatarLeft = (ctx.width - avatarWidth) / 2

const avatarTop = ctx.height * 0.4

ctx.save()

ctx.beginPath()

ctx.arc(avatarLeft + avatarWidth / 2, avatarTop, avatarWidth / 2, 0, Math.PI * 2, false)

ctx.fillStyle="#f3c227"

ctx.fill()

ctx.clip()

ctx.drawImage(avatarUrl,  avatarLeft, avatarTop - avatarWidth / 2, avatarWidth, avatarWidth)

ctx.restore()

}

// 调用，这里请求图片try catch比较保险

let avatarPath = ''

try {

avatarPath = await this.getNetworkImage(this.userData.headimgurl)

} catch(e) {

avatarPath = '/static/img/default_avatar.png'

}

drawAvatar(avatarPath)