Si la página web que desea dibujar contiene una imagen de lienzo de un avatar en forma de arco, pero el avatar en sí es cuadrado, el método requerido es el siguiente:
Primero, obtenga las coordenadas, ancho y alto del avatar en el lienzo: (no entraré en detalles aquí sobre cómo obtenerlo)
sea {avatarX, avatarY, avatarW, avatarH} = {20, 20, 80, 80};Luego simplemente llama a la siguiente función:
let Canvas = document.createElement('canvas');let ctx = Canvas.getContext(2d);let avatar = new Image();avatar.src = '../src/xx.png';avatar.onload = ( escalaBy = 2) => { círculoImg(ctx, avatar, avatarX * escalaBy, avatarY * escalaBy, avatarW * escalaBy / 2);}// r: función de radio círculoImg(ctx, img, x, y, r) { ctx.save(); var d =2 * r; var cx = x + var cy = y + r; ctx.arc(cx, cy, r, 0, 2 * Math.PI) ctx.clip(); d, d); ctx.restaurar();}Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.