收藏
回答

canvas clip 裁剪圆形图像有黑边?

canvas绘制圆形图像会生成黑边, 设置fillStyle也不生效, 代码如下:

```

/**
 * 绘制用户头像
 * @param ctx
 */
drawAvatar(ctx, canvas, screenWidth) {
 const _this = this;
 // 绘制头像圆圈
 ctx.save();
 const w = 94 * screenWidth / 750;
 const h = 94 * screenWidth / 750;
 const r = 47 * screenWidth / 750;
 const x = 36 * screenWidth / 750;
 const y = 1130 * screenWidth / 750;
   ctx.beginPath();
   ctx.fillStyle="white";
   ctx.arc(x+r, y+r, r, 0, 2 * Math.PI);
   // ctx.stroke();
   ctx.clip();
 // 绘制头像
 const posterImg = canvas.createImage();
 posterImg.onload = () => {
  ctx.drawImage(posterImg, x, y, w, h);
  ctx.restore();
  console.log('绘制头像完成>>');
  _this.drawCodeImage(ctx, canvas, screenWidth);
 };
 posterImg.src = this.data.userInfo && this.data.userInfo.avatarUrl || '../../../assets/default-head.svg';
},

```

回答关注问题邀请回答
收藏

1 个回答

  • momo
    momo
    2021-02-25

    请问解决了吗

    2021-02-25
    有用
    回复 3
    • momo
      momo
      2021-02-25
      ctx.restore();
      //后面加一句
      ctx.setStrokeStyle('#fff');
      2021-02-25
      2
      回复
    • 尚
      2021-03-08
      非常感谢, 不过好像现在ctx.setStrokeStyle('#fff)改成ctx.strokeStyle='#fff', 改成这个就OK了,非常感谢!
      2021-03-08
      1
      回复
    • 这个名字真的有十个字
      这个名字真的有十个字
      2021-04-19
      老感谢了, 解决了我的一个大问题
      2021-04-19
      回复
登录 后发表内容
问题标签