wxml:

<canvas canvas-id="myCanvas" />

wxss:
canvas{
  width:375px;
  height:100px
}

js
const headImge = 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1499645618,2237231584&fm=26&gp=0.jpg'
 //百度的隨便頭像圖  在真正的項(xiàng)目中需要先使用 wx.getImageInfo下載頭像后的路徑
const headWH = 160 / 2 //頭像的框高
const ctx = wx.createCanvasContext('myCanvas')
ctx.setFillStyle("#fff") 白色背景
ctx.fillRect(0, 0, 750, 100)//畫布框高 x y w h
ctx.fillRect(0, 0, headWH, headWH) //畫一個(gè)頭像的框
{
    let avatarurl_width = headWH; //繪制的頭像寬度
    let avatarurl_heigth = headWH; //繪制的頭像高度
    let avatarurl_x = 0; //繪制的頭像在畫布上的位置
    let avatarurl_y = headWH; //繪制的頭像在畫布上的位置
        ctx.save();
        ctx.beginPath(); //開(kāi)始繪制
            //先畫個(gè)圓   前兩個(gè)參數(shù)確定了圓心 （x,y） 坐標(biāo)  第三個(gè)參數(shù)是圓的半徑  四參數(shù)是繪圖方向  默認(rèn)是false，即順時(shí)針
        ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false);
        ctx.clip(); //畫好了圓 剪切  原始畫布中剪切任意形狀和尺寸。一旦剪切了某個(gè)區(qū)域，則所有之后的繪圖都會(huì)被限制在被剪切的區(qū)域內(nèi) 這也是我們要save上下文的原因
        ctx.drawImage(headImge, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth); // 推進(jìn)去圖片，必須是https圖片
        ctx.restore(); //恢復(fù)之前保存的繪圖上下文 恢復(fù)之前保存的繪圖上下午即狀態(tài) 還可以繼續(xù)繪制
        }

以上就是畫圓的源碼 有需要的朋友 可 copy 嘗試
一起加油?。?！