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 相关文章推荐
CSS3五个技巧给你的网站带来出色的效果
Apr 02 HTML / CSS
深入CSS3 动画效果的总结详解
May 09 HTML / CSS
css3+jq创作含苞待放的荷花
Feb 20 HTML / CSS
CSS3条纹背景制作的实战攻略
May 31 HTML / CSS
CSS 说明横向进度条最后显示文字的实现代码
Nov 10 HTML / CSS
CSS3实现红包抖动效果
Dec 23 HTML / CSS
html5 视频播放解决方案
Nov 06 HTML / CSS
HTML5 WebSocket实现点对点聊天的示例代码
Jan 31 HTML / CSS
HTML5播放实现rtmp流直播
Jun 16 HTML / CSS
css3带你实现3D转换效果
Feb 24 HTML / CSS
通过feDisplacementMap和feImage实现水波特效
Apr 24 HTML / CSS
浅谈为什么我的 z-index 又不生效了
Jul 15 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
在项目中寻找代码的坏命名
2012/07/14 PHP
域名和cookie问题(域名后缀)
2012/10/10 PHP
PHP register_shutdown_function函数的深入解析
2013/06/03 PHP
jQuery each()方法的使用方法
2010/03/18 Javascript
制作高质量的JQuery Plugin 插件的方法
2010/04/20 Javascript
jQuery实现鼠标滑过遮罩并高亮显示效果
2013/07/16 Javascript
jQuery中$.fn的用法示例介绍
2013/11/05 Javascript
JS delegate与live浅析
2013/12/21 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
2014/03/17 Javascript
深入理解JavaScript系列(28):设计模式之工厂模式详解
2015/03/03 Javascript
微信小程序  checkbox组件详解及简单实例
2017/01/10 Javascript
AngularJS实现动态添加Option的方法
2017/05/17 Javascript
BootStrap Table 后台数据绑定、特殊列处理、排序功能
2017/05/27 Javascript
使用Vue父子组件通信实现todolist的功能示例代码
2019/04/11 Javascript
vue模仿网易云音乐的单页面应用
2019/04/24 Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
2019/09/25 Javascript
浅谈Node新版本13.2.0正式支持ES Modules特性
2019/11/25 Javascript
[55:04]海涛DOTA2死魂复燃6.82版本介绍
2014/09/28 DOTA
[54:15]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第二场2月1日
2021/03/11 DOTA
简单说明Python中的装饰器的用法
2015/04/24 Python
Python实现快速多线程ping的方法
2015/07/15 Python
python实现发送和获取手机短信验证码
2016/01/15 Python
python2 与python3的print区别小结
2018/01/16 Python
Python cookbook(数据结构与算法)对切片命名清除索引的方法
2018/03/13 Python
python遍历一个目录,输出所有的文件名的实例
2018/04/23 Python
解决django同步数据库的时候app models表没有成功创建的问题
2019/08/09 Python
基于python plotly交互式图表大全
2019/12/07 Python
tf.concat中axis的含义与使用详解
2020/02/07 Python
Django-xadmin+rule对象级权限的实现方式
2020/03/30 Python
使用HTML5做个画图板的方法介绍
2013/05/03 HTML / CSS
美国优质宠物用品购买网站:Muttropolis
2020/02/17 全球购物
北京-环亚运商测试题.net程序员初步测试题
2013/05/28 面试题
Python里面如何拷贝一个对象
2014/02/17 面试题
高中军训广播稿
2014/01/14 职场文书
《雨霖铃》听课反思
2014/02/13 职场文书
公司口号大全
2014/06/11 职场文书