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之动画在webapp中的应用
Nov 21 HTML / CSS
使用CSS3来匹配横屏竖屏的简单方法
Aug 04 HTML / CSS
css3通过scale()、rotate()实现放大、旋转
Mar 19 HTML / CSS
Html5内唤醒百度、高德APP的实现示例
May 20 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(一)
Jan 21 HTML / CSS
HTML5 本地存储之如果没有数据库究竟会怎样
Apr 25 HTML / CSS
HTML5 localStorage使用总结
Feb 22 HTML / CSS
HTML5 source标签:媒介元素定义媒介资源
Jan 29 HTML / CSS
html5实现多图片预览上传及点击可拖拽控件
Mar 15 HTML / CSS
手摸手教你用canvas实现给图片添加平铺水印的实现
Aug 20 HTML / CSS
CSS中妙用 drop-shadow 实现线条光影效果
Nov 11 HTML / CSS
CSS SandBox应用场景及常见问题
Jun 25 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 中执行系统外部命令
2006/10/09 PHP
别人整理的服务器变量:$_SERVER
2006/10/20 PHP
分享PHP入门的学习方法
2007/01/02 PHP
php中将数组存到文件里的实现代码
2012/01/19 PHP
如何用php获取文件名后缀
2013/06/09 PHP
ECshop 迁移到 PHP7版本时遇到的兼容性问题
2016/02/15 PHP
PHP封装的简单连接MongoDB类示例
2019/02/13 PHP
php使用mysqli和pdo扩展,测试对比mysql数据库的执行效率完整示例
2019/05/09 PHP
解决laravel groupBy 对查询结果进行分组出现的问题
2019/10/09 PHP
JQuery困惑—包装集 DOM节点
2009/10/16 Javascript
jquery $("#variable") 循环改变variable的值示例
2014/02/23 Javascript
jquery实现的Banner广告收缩效果代码
2015/09/02 Javascript
学习JavaScript设计模式之中介者模式
2016/01/14 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
2016/03/11 Javascript
jquery 抽奖小程序实现代码
2016/10/12 Javascript
BootStrap 动态表单效果
2017/06/02 Javascript
JS实现给json数组动态赋值的方法示例
2020/03/19 Javascript
Node.js中流(stream)的使用方法示例
2017/07/16 Javascript
NodeJS实现自定义流的方法
2018/08/01 NodeJs
Vue表单之v-model绑定下拉列表功能
2019/05/14 Javascript
JS中比较两个Object数组是否相等方法实例
2019/11/11 Javascript
使用js和canvas实现时钟效果
2020/09/08 Javascript
在react-antd中弹出层form内容传递给父组件的操作
2020/10/24 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
2020/11/11 Javascript
Python迭代用法实例教程
2014/09/08 Python
Python解惑之整数比较详解
2017/04/24 Python
Python用户推荐系统曼哈顿算法实现完整代码
2017/12/01 Python
Tornado 多进程实现分析详解
2018/01/12 Python
Python3将数据保存为txt文件的方法
2019/09/12 Python
pytorch的batch normalize使用详解
2020/01/15 Python
Python 实现加密过的PDF文件转WORD格式
2020/02/04 Python
详解Flask前后端分离项目案例
2020/07/24 Python
canvas绘制视频封面的方法
2018/02/05 HTML / CSS
捐助感谢信
2015/01/22 职场文书
2015年置业顾问工作总结
2015/04/07 职场文书
MySQL 常见存储引擎的优劣
2021/06/02 MySQL