How to remove the border left by canvas drawing a round picture (Mini Program)?

as shown below, using the shared image generated by canvasAPI provided by Mini Program, you can only see the QR code part of the circle image. You can draw a circle image after using ctx.clip and then using ctx.drawImg. But what to do with the remaining frames?

draw circle code:

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();
}

share pictures:


set track color transparency: ctx.setStrokeStyle ('rgba')


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

try it. If not, consider using css3 scale to zoom in, and then overflow:hidden;

.
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b307d7-40d5d.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b307d7-40d5d.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?