darwAvatarArc: function(ctx, src, x, y, w, h = w){

? ? /*

? ? ? ctx: 畫布對象

? ? ? src: 頭像緩存路徑

? ? ? x: 頭像起始位置 橫坐標

? ? ? y: 頭像起始位置 縱坐標

? ? ? w: 頭像寬度

? ? ? h: 頭像高度，不傳為w

? ? */

? ? // 保存繪圖上下文。

? ? ctx.save();

? ? // 開始創(chuàng)建一個路徑。需要調用 fill 或者 stroke 才會使用路徑進行填充或描邊

? ? ctx.beginPath()

? ? // 設創(chuàng)建一個圓可以指定 起始弧度為 0，終止弧度為 2 * Math.PI。

? ? // 用 stroke 或者 fill 方法來在 canvas 中畫弧線。

? ? ctx.arc(x+w/2, y+h/2, w/2, 0, Math.PI * 2, false);

? ? /* 從原始畫布中剪切任意形狀和尺寸。

? ? 一旦剪切了某個區(qū)域，則所有之后的繪圖都會被限制在被剪切的區(qū)域內（

? ? 不能訪問畫布上的其他區(qū)域）?？梢栽谑褂?clip 方法前通過使用 save 方法對當前畫布區(qū)域進行保存，并在以后的任意時間通過restore方法對其進行恢復。

? ? */

? ? ctx.clip()

? ? // 畫頭像

? ? ctx.drawImage(src, x, y, w, h);

? ? // 恢復之前保存的繪圖上下文。

? ? ctx.restore()

? ? // 將之前在繪圖上下文中的描述（路徑、變形、樣式）畫到 canvas 中。

? ? ctx.draw(true)

? }

小程序代碼片段：https://developers.weixin.qq.com/s/z4J5TOmz7Y68