【小程序】如何移除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();
}

分享图片：

【小程序】如何移除canvas画圆形图片留下的边框（小程序）?

回答

设置轨迹颜色透明：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;

以上是 【小程序】如何移除canvas画圆形图片留下的边框（小程序）? 的全部内容， 来源链接： utcz.com/a/79023.html

回到顶部