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


Posted in HTML / CSS onJanuary 17, 2019

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
使用HTML5和CSS3表单验证功能
May 05 HTML / CSS
CSS3实现的文本3D效果附图
Sep 03 HTML / CSS
一款纯css3实现的动画加载导航
Oct 08 HTML / CSS
基于CSS3实现的黑色个性导航菜单效果
Sep 14 HTML / CSS
CSS3绘制圆角矩形的简单示例
Sep 28 HTML / CSS
CSS3 3D酷炫立方体变换动画的实现
Mar 26 HTML / CSS
详解基于canvas的视频遮罩插件
Jan 04 HTML / CSS
Html5 Canvas动画基础碰撞检测的实现
Dec 06 HTML / CSS
CSS3 制作的彩虹按钮样式
Apr 11 HTML / CSS
纯html+css实现打字效果
Aug 02 HTML / CSS
css样式important规则的正确使用方式
Jun 10 HTML / CSS
使用CSS自定义属性实现骨架屏效果
Jun 21 HTML / CSS
HTML5如何使用SVG的方法示例
Jan 11 #HTML / CSS
Canvas 像素处理之改变透明度的实现代码
Jan 08 #HTML / CSS
详解Canvas实用库Fabric.js使用手册
Jan 07 #HTML / CSS
Html5原创俄罗斯方块(基于canvas)
Jan 07 #HTML / CSS
h5使用canvas画布实现手势解锁
Jan 04 #HTML / CSS
canvas中普通动效与粒子动效的实现代码示例
Jan 03 #HTML / CSS
详解webapp页面滚动卡顿的解决办法
Dec 26 #HTML / CSS
You might like
php面向对象全攻略 (五) 封装性
2009/09/30 PHP
PHP中PDO基础教程 入门级
2011/09/04 PHP
php字符串分割函数explode的实例代码
2013/02/07 PHP
为PHP5.4开启Zend OPCode缓存
2014/12/26 PHP
使用PHP生成PDF方法详解
2015/01/23 PHP
JavaScript 图像动画的小demo
2012/05/23 Javascript
关于JavaScript中原型继承中的一点思考
2012/07/25 Javascript
jQuery中outerHeight()方法用法实例
2015/01/19 Javascript
解决jquery实现的radio重新选中的问题
2015/07/03 Javascript
一起学写js Calender日历控件
2016/04/14 Javascript
详解Nodejs基于mongoose模块的增删改查的操作
2016/12/21 NodeJs
Angular2使用Angular-CLI快速搭建工程(二)
2017/05/21 Javascript
js判断输入框不能为空格或null值的实现方法
2018/03/02 Javascript
vue多页面项目中路由使用history模式的方法
2019/09/23 Javascript
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
2020/03/02 Javascript
[04:28]2014DOTA2国际邀请赛 采访小兔子LGD挺进钥匙体育馆
2014/07/14 DOTA
Python和GO语言实现的消息摘要算法示例
2015/03/10 Python
在pycharm上mongodb配置及可视化设置方法
2018/11/30 Python
解决安装pycharm后不能执行python脚本的问题
2019/01/19 Python
python实现获取单向链表倒数第k个结点的值示例
2019/10/24 Python
配置python的编程环境之Anaconda + VSCode的教程
2020/03/29 Python
python实现输入三角形边长自动作图求面积案例
2020/04/12 Python
CSS3系列之3D制作方法案例
2017/08/14 HTML / CSS
详解CSS3 Media Queries中媒体属性的使用
2016/02/29 HTML / CSS
html5 worker 实例(二) 图片变换效果
2013/06/24 HTML / CSS
Html5导航栏吸顶方案原理与对比实现
2020/06/10 HTML / CSS
味多美官网:蛋糕订购,100%使用天然奶油
2017/11/10 全球购物
阿玛尼意大利官网:Armani意大利
2018/10/30 全球购物
豪华复古化妆:Besame Cosmetics
2019/09/06 全球购物
怎样声明接口
2014/09/19 面试题
大学新生军训个人的自我评价
2013/10/03 职场文书
装潢设计专业推荐信模板
2013/11/26 职场文书
黄河的主人教学反思
2014/02/07 职场文书
领导班子在批评与自我批评座谈会上的发言
2014/09/28 职场文书
高二语文教学反思
2016/02/16 职场文书
Nginx 路由转发和反向代理location配置实现
2021/11/11 Servers