canvas画圆头像

   //画头像
    var avatar_width = 120;    //绘制的头像宽度
    var avatar_heigth = 120;  //绘制的头像高度
    var avatar_x = 50;  //绘制的头像在画布上的位置
    var avatar_y = 50;  //绘制的头像在画布上的位置

    ctx.save();
    ctx.beginPath(); //开始绘制
    //先画个圆  前两个参数确定了圆心 （x,y） 坐标  第三个参数是圆的半径  四参数是绘图方向  默认是false，即顺时针
    ctx.arc(avatar_width / 2 + avatar_x, avatar_heigth / 2 + avatar_y, avatar_width / 2, 0, Math.PI * 2, false);
    ctx.clip();//画好了圆 剪切  原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内 这也是我们要save上下文的原因
    ctx.drawImage(that.data.avatarSrc, avatar_x, avatar_y, avatar_width, avatar_heigth); // 推进去图片，必须是https图片
    ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 还可以继续绘制