그리고 싶은 웹 페이지에 호 모양의 아바타 캔버스 이미지가 포함되어 있는데, 아바타 자체가 정사각형인 경우 필요한 방법은 다음과 같습니다.
먼저 캔버스에 있는 아바타의 좌표, 너비, 높이를 가져옵니다. (얻는 방법은 여기에서 자세히 설명하지 않겠습니다.)
{avatarX, 아바타Y, 아바타W, 아바타H} = {20, 20, 80, 80}이라고 둡니다.그런 다음 다음 함수를 호출하십시오.
let Canvas = document.createElement('canvas');let ctx = Canvas.getContext(2d);let Avatar = new Image();avatar.src = '../src/xx.png';avatar.onload = ( scaleBy = 2) => { CircleImg(ctx, 아바타, 아바타X * scaleBy, 아바타Y * scaleBy, 아바타W * scaleBy / 2);}// r: 반경 함수 CircleImg(ctx, img, x, y, r) { ctx.save(); var d =2 * r; var cx = x + y + r; ctx.arc(cx, cy, r, 0, 2 * Math.PI) ctx.clip(); d, d) ctx.restore();}위 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.