微信小程序海报画布生成圆形头像
YuanTouo 2020-07-10 wechat-canvas
由于海报需求将用户头像在海报上呈圆形 😃
// 绘制圆形头像
//绘制的头像宽度
let avatarurl_width = 40
//绘制的头像高度
let avatarurl_heigth = 40
//绘制的头像在画布上的位置
let avatarurl_x = 10
//绘制的头像在画布上的位置
let avatarurl_y = 10
// 保存之前绘制
ctx.save()
ctx.beginPath()
// 圆心x：绘制头像的宽度/2+头像在画布上的位置-- 圆心y：绘制头像的高度/2+头像在画布上的位置 -- 半径：头像的宽度/2
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.avatarUrl, avatarurl_x , avatarurl_y , avatarurl_width , avatarurl_heigth)
// 恢复之前保存的绘图上下文
ctx.restore()
// 绘制
ctx.draw()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
