使用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();
}

看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注创新互联行业资讯频道,感谢您对创新互联的支持。


文章名称:使用canvas怎么绘制一个圆角头像
标题来源:http://scyanting.com/article/gidpdh.html