canvas绘制圆形头像

贴一段canvas裁剪圆形头像的代码

 // (canvas对象，二维码图片本地路径(如果是网络图片先用wx.downloadFile存本地)，坐标x, 坐标y, 半径)
that.circleImg(ctx, userimgSrc, avatarurl_x, avatarurl_y, avatarurl_width)
circleImg: function (ctx, img, x, y, width) {ctx.save();//绘制头像ctx.beginPath(); //开始绘制//先画个圆，前两个参数确定了圆心 （x,y） 坐标  第三个参数是圆的半径  四参数是绘图方向  默认是false，              即顺时针ctx.arc(width / 2 + x, width / 2 + y, width / 2, 0, Math.PI * 2, true);ctx.clip(); //画好了圆 剪切  原始画布中剪切任意形状和尺寸。// 一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内 这也是我们要save上下文的原因ctx.drawImage(img, x, y, width, width);// ctx.fill();ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图问下文即状态 还可以继续绘制ctx.closePath();
},

如出现类似这种边框，可尝试将这块逻辑放在最后绘制（本人踩过的坑）

canvas绘制圆形头像相关推荐

微信小程序canvas绘制圆形头像
context.save(); //绘制头像 context.beginPath(); //开始绘制 //先画个圆,前两个参数确定了圆心 (x,y) 坐标第三个参数是圆的半径四参数是绘图方向默认 ...
openlayers 绘制圆形头像图标
openlayers 使用canvas绘制圆形头像图标_奔跑的痕迹的博客-CSDN博客
小程序canvas绘制微信头像
微信小程序canvas是不支持绘制网络图片的,所以逻辑就是先下载到本地,使用本地临时路径去绘制: // 查看是否授权wx.getSetting({success(res) {if (res.authS ...
canvas绘制圆形
canvas绘制圆形的思路: 1.创建路径 XXX.beginpath(); 2.创建圆形的路径: 3.关闭路径:XXX.closepath(); 路径不关闭也能绘制出图形 4.设定绘制样式. 创建圆 ...
html5 canvas绘制圆形进度实例
2019独角兽企业重金招聘Python工程师标准>>> html5 canvas绘制圆形进度实例 <canvas id="test" width=200 h ...
canvas绘制圆形马赛克方法二
因某些项目需求:必须先绘制整出整个图片在打马赛克,"canvas绘制圆形马赛克方法一"中方式不能满足,故用以下方式实现: 方法简介: 先绘制出整个图片在画布a上,在将马赛克数据co ...
如何在html5中实现多圆,JavaScript与html5如何实现canvas绘制圆形图案的方法介绍
这篇文章主要介绍了js+html5实现canvas绘制圆形图案的方法,涉及html5图形绘制的基础技巧,需要的朋友可以参考下本文实例讲述了js+html5实现canvas绘制圆形图案的方法.分享给大 ...
圆头像微信小程序绘图_小程序canvas绘制圆形微信头像
提示:canvas画布绘画图片的时候,图片不能是互联网图片,必需是本地图片才可以正常绘制. 第一步:获取客户受权,下载微信头像图片到本地.pleaseSign: function(event) { w ...
android圆形头像 demo,Android图像处理之绘制圆形头像
在Android中,绘制圆形和绘制图片都是很容易的事情,但是绘制圆形图片就有点难倒人了.以前为了偷懒就直接去github上找一个开源项目,后来才发现绘制圆形图片其实也是很简单的事.绘制圆形图片也需要两 ...
html5 canvas绘制圆形印章，以及与页面交互
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 < ...

canvas绘制圆形头像

canvas绘制圆形头像相关推荐

最新文章

热门文章