canvas clip 裁剪圆形图像有黑边?
发布于 5 年前 作者 lifan 14968 次浏览 来自 官方Issues

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';
},

```

回到顶部