canvas绘制白色描边圆形头像（CV必备）

茶橘！

于 2023-05-19 16:39:09 发布

阅读量496

点赞数

文章标签：微信小程序 vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_49602763/article/details/130769597

版权

// headerPhtotTop 头像距离顶部距离
// headerPhtotLeft 头像距离左边距离
// headerPhtot.path 图片地址
// 54为图片的宽高，这里偷懒了直接给了事数，可以自己写一个声明
let headerPhtotTop = 778;
let headerPhtotLeft = 95;
const circle = {
  x: 54 / 2 + headerPhtotLeft,
  y: 54 / 2 + headerPhtotTop,
  r: 54 / 2,
};

//开始路径画圆,剪切处理 设置头像白色边框
ctx.save();
ctx.beginPath();
ctx.arc(circle.x, circle.y, circle.r + 2, 0, Math.PI * 2, false);
ctx.clip(); //剪切路径
ctx.fillStyle = "#ffffff";
ctx.fillRect(headerPhtotLeft - 2, headerPhtotTop - 2, 54 + 4, 54 + 4);
ctx.restore();
// 设置圆形头像
ctx.save();
ctx.beginPath();
ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI * 2, false);
ctx.clip(); //剪切路径
ctx.drawImage(headerPhtot.path, headerPhtotLeft, headerPhtotTop, 54, 54);
//恢复状态
ctx.restore();

canvas的坑还挺多的，所以多半都是需要自己微调，