小程序canvas绘制圆形图片并且居中

2019-09-27 21:53
椰子皮
6173
2
9
小程序

在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)
 

 

支付宝微信
9
关注公众号获取更多内容
uni-app小程序自定义导航栏组件
结合lazyload实现文章页里面的图片预加载
共有 2 条评论
发表评论
  • 今日新鲜事#10059
    2019-12-09 09:19
    广西壮族自治区贺州市八步区
    Win7

    文章不错支持一下吧

  • 77#10052
    2019-11-22 19:24
    湖北省武汉市江夏区
    Win10

    不错哦,加油

总共 2
  • 1
不支持canvas
春季
夏季
秋季
冬季
暗黑
简约
小清新