canvas画圆角头像

  var canvas = document.querySelector('canvas');
  var ctx = canvas.getContext('2d');
  var img = new Image();
  img.crossOrigin = 'Anonymous';
  img.src = 'xx.png';
  img.onload = function () {
    DrawCircleImg(ctx,img,20,20,10);
  };

  function DrawCircleImg(ctx,img,x,y,r) {
    ctx.save();
    ctx.arc(x+r,y+r,r,0,2*Math.PI);
    ctx.clip();
    ctx.drawImage(img,x,y,2*r,2*r);
    ctx.restore();
  }