canvas画圆形头像的方法

    getCirclePic(ctx: any, x: number, y: number, r: number, pic: string, dx: number, dy: number, dWidth: number, dHeight: number) {

      //  x:圆心x轴位置 

      //  y:圆心x轴位置 

      //  r:圆半径

      //  pic:图片 

      //  dx:图片左上角x轴位置

      //  dy:图片左上角y轴位置 

      //  dWidth:图片的宽 

      //  dHeight:图片的高

      ctx.save();

      ctx.beginPath();

      ctx.arc(x, y, r, 0, 2 * Math.PI, false);

      ctx.fill();

      ctx.clip();

      ctx.drawImage(pic, dx, dy, dWidth, dHeight);

      ctx.restore();

    },

*参数后的类型约束不使用TS的同学自行删除哦

你可能感兴趣的:(canvas画圆形头像的方法)