canvas绘制圆角头像的实现方法

如果你想绘制的网页包含一个圆弧形的头像的canvas图片，但是头像本身是正方形的，需要的方法如下：

首先， 拿到头像在画布上的坐标和宽高：(具体怎么获取不在此做具体介绍)

let {
avatarX, avatarY, avatarW, avatarH}
 = {
20, 20, 80, 80}
    ;
    

然后 只需要调用以下函数即可：

let Canvas = document.createElement('canvas');
    let ctx = Canvas.getContext("2d");
    let avatar = new Image();
    avatar.src = '../src/xx.png';
    avatar.onload = (scaleBy = 2) =>
 {
       circleimg(ctx, avatar, avatarX * scaleBy, avatarY * scaleBy, avatarW * scaleBy / 2);
}
// r: 半径function circleimg(ctx, img, x, y, r) {
        ctx.save();
        VAR d =2 * r;
        var cx = x + r;
        var cy = y + r;
        ctx.arc(cx, cy, r, 0, 2 * Math.PI);
        ctx.clip();
        ctx.drawImage(img, x, y, d, d);
        ctx.reStore();
}
     

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！