canvas繪制圓角頭像

Benedict Evans 發布于2019-08-23 14:47 / 2731人閱讀

摘要：如果你想繪制的網頁包含一個圓弧形的頭像的圖片，但是頭像本身是正方形的，需要的方法如下首先，拿到頭像在畫布上的坐標和寬高具體怎么獲取不在此做具體介紹然后只需要調用以下函數即可半徑

如果你想繪制的網頁包含一個圓弧形的頭像的canvas圖片，但是頭像本身是正方形的，需要的方法如下：
首先，拿到頭像在畫布上的坐標和寬高：(具體怎么獲取不在此做具體介紹)

let {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 = (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();
}

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101128.html

canvas實際項目操作，包含：線條，圓形，扇形，圖片繪制，圖片圓角遮罩，矩形，弧形文字

摘要：注意事項開始時按像素大小的畫布寫，最后發現放在分辨率高的手機上全是鋸齒，所以最后采用的寬高來寫。繪制完圖片頭像會覆蓋整個畫布，所以圖片得最后繪制。弧形文字需要一點一旦調整弧度。學完我寫的上一章小白上學canvas基礎，我們就來這里現學現用了。這里先看我們的設計圖和最終實現效果；左面是設計稿，右面是完成后的效果圖： showImg(https://segmentfault.com/im...

channg 2019-08-21 14:16 評論0 收藏0
通過li-canvas輕松實現單圖、多圖、圓角圖繪制，單行文字、多行文字、豎向文字繪制，自動換行，保

摘要：新增的是個強大的功能，估計大家平時都會用到，只是頻率不高，偶爾用它合成圖片，但是如果不進行封裝的話，代碼會很亂，所以對常用的畫圖繪制文字保存功能進行了封裝，目前還比較滿意，能夠快速完成繪圖任務，從容應對需求變更，只需進行簡單配置即可。 Html5新增的canvas是個強大的功能，估計大家平時都會用到，只是頻率不高，偶爾用它合成圖片，但是如果不進行封裝的話，代碼會很亂，所以對canva...

source 2019-08-23 13:47 評論0 收藏0