Please teach WeChat Mini Programs drawImage and clip how to cut a picture into a circle as an avatar and position it.

ask for advice, such as the title, thank you.

Mar.16,2021

I am using Mini Program's canvas, but it is similar to that of the web page. The idea is to first locate a circular hole in the canvas canvas, and then the square picture happens to be in that position, so it looks like the picture is round.
here is the code

context.save();
context.beginPath();
// 50  90  x  y 25 
context.arc(50, 90, 25, 0, 2*Math.PI);
context.closePath();
//  50 90
context.clip();
// res.tempFilePath  wx.downloadFile 
//  drawImage  canvas  x y 
context.drawImage(res.tempFilePath, 25, 65, 50, 50);
context.restore();
context.draw(true, that.getTempFilePath);

according to the above, it is very clear and easy to display the round avatar, and the location is also clear.


globalCompositeOperation

it's better to cut a circle in this way

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-1eaf492-699b4.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-1eaf492-699b4.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?