資訊專欄INFORMATION COLUMN
摘要：如果你想繪制的網(wǎng)頁包含一個圓弧形的頭像的圖片，但是頭像本身是正方形的，需要的方法如下首先，拿到頭像在畫布上的坐標(biāo)和寬高具體怎么獲取不在此做具體介紹然后只需要調(diào)用以下函數(shù)即可半徑
如果你想繪制的網(wǎng)頁包含一個圓弧形的頭像的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();
}
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/101128.html
摘要：注意事項開始時按像素大小的畫布寫，最后發(fā)現(xiàn)放在分辨率高的手機(jī)上全是鋸齒，所以最后采用的寬高來寫。繪制完圖片頭像會覆蓋整個畫布，所以圖片得最后繪制?；⌒挝淖中枰稽c(diǎn)一旦調(diào)整弧度。 學(xué)完我寫的上一章小白上學(xué)canvas基礎(chǔ)，我們就來這里現(xiàn)學(xué)現(xiàn)用了。這里先看我們的設(shè)計圖和最終實現(xiàn)效果；左面是設(shè)計稿，右面是完成后的效果圖： showImg(https://segmentfault.com/im...
摘要：新增的是個強(qiáng)大的功能，估計大家平時都會用到，只是頻率不高，偶爾用它合成圖片，但是如果不進(jìn)行封裝的話，代碼會很亂，所以對常用的畫圖繪制文字保存功能進(jìn)行了封裝，目前還比較滿意，能夠快速完成繪圖任務(wù)，從容應(yīng)對需求變更，只需進(jìn)行簡單配置即可。 Html5新增的canvas是個強(qiáng)大的功能， 估計大家平時都會用到，只是頻率不高，偶爾用它合成圖片，但是如果不進(jìn)行封裝的話，代碼會很亂，所以對canva...
閱讀 1083·2021-09-29 09:35
閱讀 4664·2021-09-22 15:24
閱讀 1460·2021-07-25 21:37
閱讀 2191·2019-08-30 14:17
閱讀 975·2019-08-30 13:56
閱讀 2420·2019-08-29 17:07
閱讀 1279·2019-08-29 12:44
閱讀 2713·2019-08-26 18:26
