微信小程序canvas实现画圆圈头像

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

    /*

      ctx: 画布对象

      src: 头像缓存路径

      x: 头像起始位置 横坐标

      y: 头像起始位置 纵坐标

      w: 头像宽度

      h: 头像高度，不传为w

    */

    // 保存绘图上下文。

    ctx.save();

    // 开始创建一个路径。需要调用 fill 或者 stroke 才会使用路径进行填充或描边

    ctx.beginPath()

    // 设创建一个圆可以指定 起始弧度为 0，终止弧度为 2 * Math.PI。

    // 用 stroke 或者 fill 方法来在 canvas 中画弧线。

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

    /* 从原始画布中剪切任意形状和尺寸。

    一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（

    不能访问画布上的其他区域）。可以在使用 clip 方法前通过使用 save 方法对当前画布区域进行保存，并在以后的任意时间通过restore方法对其进行恢复。

    */

    ctx.clip()

    // 画头像

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

    // 恢复之前保存的绘图上下文。

    ctx.restore()

    // 将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。

    ctx.draw(true)

  }

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