主頁 > 知識庫 > canvas繪制圓角頭像的實現(xiàn)方法

canvas繪制圓角頭像的實現(xiàn)方法
熱門標簽：高德地圖標注商戶怎么標 智能電銷機器人被禁用了么 地圖標注軟件打印出來 ok電銷機器人 惡搞電話機器人 電話機器人技術 黃石ai電銷機器人呼叫中心 欣鼎電銷機器人 效果 如何查看地圖標注

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

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

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

然后 只需要調用以下函數(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();
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

標簽：綏化 中山 赤峰 聊城 萍鄉(xiāng) 金昌 盤錦 阿壩

巨人網絡通訊聲明：本文標題《canvas繪制圓角頭像的實現(xiàn)方法》，本文關鍵詞  canvas,繪制,圓角,頭像,的,；如發(fā)現(xiàn)本文內容存在版權問題，煩請?zhí)峁┫嚓P信息告之我們，我們將及時溝通與處理。本站內容系統(tǒng)采集于網絡，涉及言論、版權與本站無關。
  • 相關文章
  • 下面列出與本文章《canvas繪制圓角頭像的實現(xiàn)方法》相關的同類信息！
  • 本頁收集關于canvas繪制圓角頭像的實現(xiàn)方法的相關信息資訊供網民參考！
    • 推薦文章