微信小程序使用CANVAS繪製圖片及圖片圓角

//繪製的頭像寬度
let avatarurl_width = 40
//繪製的頭像高度
let avatarurl_heigth = 40
//繪製的頭像在畫布上的位置
let avatarurl_x = 10
//繪製的頭像在畫布上的位置
let avatarurl_y = 10
 
// 繪製頭像
ctx.save()
// 開始創建一個路徑
ctx.beginPath()
// 畫一個圓形裁剪區域
ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false)
// 裁剪
ctx.clip()
// 繪製圖片
ctx.drawImage(this.data.postAvater, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth)
// 恢復之前保存的繪圖上下文
ctx.restore()

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章