WeChat applet uses canvas to draw pictures and picture corners

1. Draw a round avatar

// draw picture width 
the let avatarurl_width = 40 
// head height draw 
the let avatarurl_heigth = 40 
// head position drawn on the canvas 
the let avatarurl_x = 10 
// head position drawn on the canvas 
the let avatarurl_y = 10 

// Draw avatar 
ctx.save () 
// Start creating a path 
ctx.beginPath () 
// Draw a circular crop area 
ctx.arc (avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math. PI * 2, false) 
// crop 
ctx.clip () 
// draw picture 
ctx.drawImage (this.data.postAvater, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth) 
// restore the previously saved drawing context 
ctx.restore ()

2. Draw a 4 pixel picture with rounded corners

// The x coordinate of the picture

let bg_x = 10

// The y coordinate of the picture

let bg_y = 70

// Picture width

let bg_w = this.data.pageWidth - 116

// Picture height

let bg_h = this.data.pageHeight * 0.35

// Picture rounded corners

let bg_r = 4

 

// Draw poster background picture rounded corners

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)

// Restore the previously saved drawing context

ctx.restore()