globalCompositeOperation

用這種方式去裁個(gè)圓形比較好

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

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

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