微信小程序使用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()