微信小程序canvas实现画圆圈头像
生活随笔
收集整理的這篇文章主要介紹了
微信小程序canvas实现画圆圈头像
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
//獲取用戶設(shè)備信息
wx.getSystemInfo({success: function (res) {_this.setData({screenHeight: res.windowHeight,screenWidth: res.windowWidth,});}
});
網(wǎng)上的圖片要先下載到本地
var _this = thiswx.getImageInfo({ // 小程序獲取圖片信息APIsrc:這是你網(wǎng)上的圖片,success: function (res) {_this.setData({headImg: res.path})}})}}
});
var avatarUrl = that.data.headImg
var unit = that.data.screenWidth / 375
context.save()
context.beginPath()/*x: 頭像起始位置 橫坐標(biāo)y: 頭像起始位置 縱坐標(biāo)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()
總結(jié)
以上是生活随笔為你收集整理的微信小程序canvas实现画圆圈头像的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Photo Ninja for Mac(
- 下一篇： 关于绿色建筑的发展促进，从技术厂家角度我