請教一下 微信小程序 drawImage 和 clip 怎么將一張圖片裁剪成一個圓形作為頭像并定位

globalCompositeOperation

用這種方式去裁個圓形比較好

我是在用小程序的 canvas，不過和網(wǎng)頁的也差不多，其中的思路就是先定位在畫布 canvas 上開一個圓形洞，然后方形圖片剛剛好在那個位置，這樣看上去就像圖片是圓形的了。
以下是代碼

context.save();
context.beginPath();
// 下面是先定位要開個圓形的位置，50 和 90 分別就是圓的圓心的 x 坐標(biāo)和 y 坐標(biāo)，25 是半徑，后面的兩個參數(shù)就是起始和結(jié)束，這樣就能畫好一個圓了
context.arc(50, 90, 25, 0, 2*Math.PI);
context.closePath();
// 下面就裁剪出一個圓形了，且坐標(biāo)在 （50， 90）
context.clip();
// 然后畫圖片，res.tempFilePath 其實是下載到本地的一個路徑，使用小程序畫出圖片記得一定要用本地的路徑，可以用 wx.downloadFile 來實現(xiàn)。
// 因為 drawImage 的第二個和第三個參數(shù)是圖片的左上角在畫布 canvas 的 x 坐標(biāo)，y 坐標(biāo)，所以圖片的坐標(biāo)比圓形的坐標(biāo)分別都小圓的半徑大小就剛剛好能被切成圓形，后面的兩個參數(shù)就是圖片的寬和高，請設(shè)定為圓形的直徑長度。
context.drawImage(res.tempFilePath, 25, 65, 50, 50);
context.restore();
context.draw(true, that.getTempFilePath);

按照上面的，這樣就很清晰容易的顯示圓形頭像了，且定位也說清楚啦。