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 相关文章推荐
CSS改变网页中鼠标选中文字背景颜色例子
Apr 23 HTML / CSS
简单掌握CSS3中resize属性的用法
Apr 01 HTML / CSS
css3media响应式布局实例
Jul 08 HTML / CSS
详解HTML5中垂直上下居中的解决方案
Dec 20 HTML / CSS
HTML5中FileReader接口使用方法实例详解
Aug 26 HTML / CSS
html5的新玩法——语音搜索
Jan 03 HTML / CSS
HTML5 Canvas的事件处理介绍
Apr 24 HTML / CSS
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
Jan 27 HTML / CSS
浅谈HTML5中dialog元素尝鲜
Oct 15 HTML / CSS
使用数据结构给女朋友写个Html5走迷宫游戏
Nov 26 HTML / CSS
Web前端:CSS最强总结 附详细代码
Mar 31 HTML / CSS
css实现左上角飘带效果的完整代码
Mar 18 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 urlencode()与urldecode()函数字符编码原理详解
2011/12/06 PHP
PHP jQuery表单,带验证具体实现方法
2014/02/15 PHP
php实现用手机关闭计算机(电脑)的方法
2015/04/22 PHP
PHP读取mssql json数据中文乱码的解决办法
2016/04/11 PHP
laravel 解决路由除了根目录其他都404的问题
2019/10/18 PHP
JS之Date对象和获取系统当前时间详解
2014/01/13 Javascript
按钮接受回车事件的三种实现方法
2014/06/06 Javascript
深入理解javascript变量声明
2014/11/20 Javascript
JavaScript实现添加及删除事件的方法小结
2015/08/04 Javascript
JavaScript基础之this详解
2017/06/04 Javascript
利用Jasmine对Angular进行单元测试的方法详解
2017/06/12 Javascript
微信小程序实现移动端滑动分页效果(ajax)
2017/06/13 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
2017/08/14 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
2018/02/23 Javascript
Bootstrap Table列宽拖动的方法
2018/08/15 Javascript
VUE中使用MUI方法
2019/02/12 Javascript
vue基础之模板和过滤器用法实例分析
2019/03/12 Javascript
js实现unicode码字符串与utf8字节数据互转详解
2019/03/21 Javascript
微信小程序 scroll-view的使用案例代码详解
2020/06/11 Javascript
python字典多键值及重复键值的使用方法(详解)
2016/10/31 Python
Python生成器以及应用实例解析
2018/02/08 Python
Pandas之MultiIndex对象的示例详解
2019/06/25 Python
python创建n行m列数组示例
2019/12/02 Python
pytorch 实现张量tensor,图片,CPU,GPU,数组等的转换
2020/01/13 Python
乔丹诺(Giordano)酒庄德国官网:找到最好的意大利葡萄酒
2017/12/28 全球购物
JOSEPH官网:英国奢侈时尚品牌
2018/01/31 全球购物
巴西24小时在线药房:Drogasil
2020/06/20 全球购物
安德玛菲律宾官网:Under Armour菲律宾
2020/07/28 全球购物
大学生通用个人的自我评价
2014/02/10 职场文书
2014年社区重阳节活动策划方案
2014/09/16 职场文书
11.9消防日宣传标语
2014/10/08 职场文书
退休教师欢送会致辞
2015/07/31 职场文书
2015年教师节广播稿
2015/08/19 职场文书
少先队大队委竞选口号
2015/12/25 职场文书
Python+OpenCV实现图片中的圆形检测
2022/04/07 Python
CI Games宣布《堕落之王2》使用虚幻引擎5制作 预计将于2023年正式发售
2022/04/11 其他游戏