canvas绘制圆角头像

Benedict Evans 发布于2019-08-23 14:47 / 2691人阅读

摘要：如果你想绘制的网页包含一个圆弧形的头像的图片，但是头像本身是正方形的，需要的方法如下首先，拿到头像在画布上的坐标和宽高具体怎么获取不在此做具体介绍然后只需要调用以下函数即可半径

如果你想绘制的网页包含一个圆弧形的头像的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();
}

GPU云服务器云服务器 Canvas _canvas 2canvas android canvas

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101128.html

canvas实际项目操作，包含：线条，圆形，扇形，图片绘制，图片圆角遮罩，矩形，弧形文字

摘要：注意事项开始时按像素大小的画布写，最后发现放在分辨率高的手机上全是锯齿，所以最后采用的宽高来写。绘制完图片头像会覆盖整个画布，所以图片得最后绘制。弧形文字需要一点一旦调整弧度。学完我写的上一章小白上学canvas基础，我们就来这里现学现用了。这里先看我们的设计图和最终实现效果；左面是设计稿，右面是完成后的效果图： showImg(https://segmentfault.com/im...

channg 2019-08-21 14:16 评论0 收藏0
通过li-canvas轻松实现单图、多图、圆角图绘制，单行文字、多行文字、竖向文字绘制，自动换行，保

摘要：新增的是个强大的功能，估计大家平时都会用到，只是频率不高，偶尔用它合成图片，但是如果不进行封装的话，代码会很乱，所以对常用的画图绘制文字保存功能进行了封装，目前还比较满意，能够快速完成绘图任务，从容应对需求变更，只需进行简单配置即可。 Html5新增的canvas是个强大的功能，估计大家平时都会用到，只是频率不高，偶尔用它合成图片，但是如果不进行封装的话，代码会很乱，所以对canva...

source 2019-08-23 13:47 评论0 收藏0