在html5中怎么繪制圓角頭像？使用canvas繪制方法分享!

在html5中怎么繪制圓角頭像？使用canvas繪制方法分享!有過前端基礎(chǔ)的小伙伴們都知道在html5中我們可以使用各種方法來實(shí)現(xiàn)不同形狀的圖畫效果，那么今天我們就來看看有關(guān)于：“”在html5中怎么繪制圓角頭像？使用canvas繪制方法分享!這個(gè)問題的相關(guān)內(nèi)容，希望對(duì)大家的學(xué)習(xí)和了解有所幫助！

如果你想繪制的網(wǎng)頁包含一個(gè)圓弧形的頭像的canvas圖片，但是頭像本身是正方形的，需要的方法如下：

首先， 拿到頭像在畫布上的坐標(biāo)和寬高：(具體怎么獲取不在此做具體介紹)

let {avatarX, avatarY, avatarW, avatarH} = {20, 20, 80, 80};

然后 只需要調(diào)用以下函數(shù)即可：

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, avatar, avatarX * scaleBy, avatarY * scaleBy, avatarW * scaleBy / 2);
}

// r: 半徑
function circleImg(ctx, img, x, y, r) {
    ctx.save();
    var d =2 * r;
    var cx = x + r;
    var cy = y + r;
    ctx.arc(cx, cy, r, 0, 2 * Math.PI);
    ctx.clip();
    ctx.drawImage(img, x, y, d, d);
    ctx.restore();
} 

當(dāng)然了，以上就是對(duì)于：“在html5中怎么繪制圓角頭像？使用canvas繪制方法分享!”這個(gè)問題的相關(guān)內(nèi)容，有感興趣的小伙伴們都可以在W3Cschool中進(jìn)行學(xué)習(xí)和了解！