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

1.繪制圓形頭像

//繪制的頭像寬度
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()

2. 繪制4個像素的圖片圓角

// 圖片的x坐標
let bg_x = 10
// 圖片的y坐標
let bg_y = 70
// 圖片寬度
let bg_w = this.data.pageWidth - 116
// 圖片高度
let bg_h = this.data.pageHeight * 0.35
// 圖片圓角
let bg_r = 4
 
// 繪制海報背景圖片圓角
ctx.save()
ctx.beginPath()
ctx.arc(bg_x + bg_r, bg_y + bg_r, bg_r, Math.PI, Math.PI*1.5)
ctx.arc(bg_x + bg_w - bg_r, bg_y + bg_r, bg_r, Math.PI * 1.5, Math.PI * 2)
ctx.arc(bg_x + bg_w - bg_r, bg_y + bg_h - bg_r, bg_r, 0, Math.PI * 0.5)
ctx.arc(bg_x + bg_r, bg_y + bg_h - bg_r, bg_r, Math.PI * 0.5, Math.PI)
ctx.clip()
ctx.drawImage('../../../images/zbjd/tp1_2.png', bg_x, bg_y, bg_w, bg_h)
// 恢復之前保存的繪圖上下文
ctx.restore()

　轉載記錄 https://www.cnblogs.com/zhang-jiao/p/12704246.html