canvas绘制圆形头像

canvas绘制圆形头像

贴一段canvas裁剪圆形头像的代码

 // (canvas对象，二维码图片本地路径(如果是网络图片先用wx.downloadFile存本地)，坐标x, 坐标y, 半径) 
that.circleImg(ctx, userimgSrc, avatarurl_x, avatarurl_y, avatarurl_width)
circleImg: function (ctx, img, x, y, width) {
  ctx.save();
  //绘制头像
  ctx.beginPath(); //开始绘制
  //先画个圆，前两个参数确定了圆心 （x,y） 坐标  第三个参数是圆的半径  四参数是绘图方向  默认是false，			  即顺时针
  ctx.arc(width / 2 + x, width / 2 + y, width / 2, 0, Math.PI * 2, true);
  ctx.clip(); //画好了圆 剪切  原始画布中剪切任意形状和尺寸。
  // 一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内 这也是我们要save上下文的原因
  ctx.drawImage(img, x, y, width, width);
  // ctx.fill();
  ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图问下文即状态 还可以继续绘制
  ctx.closePath();
},

如出现类似这种边框，可尝试将这块逻辑放在最后绘制（本人踩过的坑）