canvas绘制圆形头像

最新推荐文章于 2024-01-02 17:13:44 发布

章木木

最新推荐文章于 2024-01-02 17:13:44 发布

阅读量913

点赞数

分类专栏：笔记文章标签：前端 javascript

本文链接：https://blog.csdn.net/m0_48192059/article/details/117463382

版权

笔记专栏收录该内容

13 篇文章

订阅专栏

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();
},

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