【Web前端问题】如何移除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();
}

分享图片：

图片描述

回答：

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

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

回到顶部