描画したい Web ページに円弧状のアバターのキャンバス画像が含まれているが、アバター自体が正方形である場合、必要な方法は次のとおりです。
まず、キャンバス上のアバターの座標、幅、高さを取得します (取得方法についてはここでは詳しく説明しません)。
{avatarX, avatarY, avatarW, avatarH} = {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 = (スケールバイ = 2) => {circleImg(ctx, アバター, アバターX * スケールバイ, アバターY * スケールバイ, アバターW * スケールバイ / 2);}// r: 半径関数circleImg(ctx, img, x, y, r) { var d = 2 * r; var cy = y + r; ctx.arc(cx, cy, r, 0, 2 * Math.PI); ctx.drawImage(img, x, y, d, d); ctx.restore();}以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。