如何移除canvas画圆形图片留下的边框(小程序)?

如下图,使用小程序提供的canvasAPI生成的分享图片,只看二维码部分圆形图片,是使用ctx.clip后再使用ctx.drawImg后达到画圆形图片的效果,但是有残留的边框如何处理?

画圆形图代码:

drawCircleImg: function (ctx, img, x, y, r) {
    ctx.save();
    var d = 2 * r;
    var cx = x - r;
    var cy = y - r;
    ctx.beginPath();
    ctx.arc(x, y, r, 0, 2 * Math.PI);
    ctx.clip();
    ctx.drawImage(img, cx, cy, d, d);
    ctx.restore();
}

分享图片:

图片描述

阅读 7k
2 个回答

设置轨迹颜色透明:ctx.setStrokeStyle('rgba(0,0,0,0)')

ctx.clip();
ctx.strokeStyle='white';
ctx.drawImage(img, cx, cy, d, d);
ctx.restore();

试试行不行,如果不行,可以考虑用css3 scale放大,然后overflow:hidden;

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题