微信小程序canvas实现画圆圈头像

圆圈头像"/>

微信小程序canvas实现画圆圈头像

//获取用户设备信息
wx.getSystemInfo({success: function (res) {_this.setData({screenHeight: res.windowHeight,screenWidth: res.windowWidth,});}
});
网上的图片要先下载到本地
var _this = thiswx.getImageInfo({   //  小程序获取图片信息APIsrc:这是你网上的图片,success: function (res) {_this.setData({headImg: res.path})}})}}
});
var avatarUrl = that.data.headImg
var unit = that.data.screenWidth / 375
context.save()
context.beginPath()/*x: 头像起始位置 横坐标y: 头像起始位置 纵坐标w: 头像宽度h: 头像高度，不传为w*/context.arc(x+w/2, y+h/2, w/2, 0, Math.PI * 2);
context.arc(unit * 164+(unit * 50)/2,unit * 15+(unit * 50)/2, (unit * 50)/2, 0, 2*Math.PI)
context.clip()
context.drawImage(avatarUrl,x, y,w,h)
context.drawImage(avatarUrl,unit * 164, unit * 15, unit * 50, unit * 50)
context.restore()