El applet WeChat usa el lienzo para dibujar imágenes y esquinas

1. Dibuja un avatar redondo

// dibujar la imagen anchura 
la let avatarurl_width = 40 
// altura de la cabeza dibujar 
la avatarurl_heigth = 40 let 
posición // cabeza dibujado en el lienzo 
la let avatarurl_x = 10 
// posición de la cabeza dibujado en el lienzo 
la avatarurl_y let = 10 

// Dibuje avatar 
ctx.save () 
// Comience a crear una ruta 
ctx.beginPath () 
// Dibuje un área de recorte circular 
ctx.arc (avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math. PI * 2, falso) 
// recortar 
ctx.clip () 
// dibujar imagen 
ctx.drawImage (this.data.postAvater, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth) 
// restaurar el contexto de dibujo previamente guardado 
ctx.restore ()

2. Dibuja una imagen de 4 píxeles con esquinas redondeadas

// La coordenada x de la imagen

dejar bg_x = 10

// La coordenada y de la imagen

let bg_y = 70

// Ancho de la imagen

let bg_w = ​​this.data.pageWidth - 116

// Altura de la imagen

let bg_h = this.data.pageHeight * 0.35

// Imagen esquinas redondeadas

let bg_r = 4

 

// Dibuja esquinas redondeadas de la imagen de fondo del póster

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)

// Restaurar el contexto de dibujo guardado previamente

ctx.restore ()