Se a página da web que você deseja desenhar contém uma imagem em tela de um avatar em forma de arco, mas o avatar em si é quadrado, o método necessário é o seguinte:
Primeiro, obtenha as coordenadas, largura e altura do avatar na tela: (não entrarei em detalhes aqui sobre como obtê-lo)
seja {avatarX, avatarY, avatarW, avatarH} = {20, 20, 80, 80};Depois é só chamar a seguinte função:
deixe 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: função de raio círculoImg(ctx, img, x, y, r) { ctx.save(); ctx.arc(cx, cy, r, 0, 2 * Math.PI); d, d);ctx.restore();}O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.