How to draw rounded head Portrait in html5

Most people do not understand the knowledge points of this article "how to draw a rounded head portrait in html5", so the editor summarizes the following contents, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to draw a rounded head portrait in html5" article.

If you want to draw a web page that contains an arc-shaped canvas image of the avatar, but the avatar itself is square, the methods you need are as follows:

First of all, get the coordinates and width and height of the avatar on the canvas: (how to get it is not described here)

Let {avatarX, avatarY, avatarW, avatarH} = {20, 20, 80, 80}

Then you only need to call the following function:

Let Canvas = document.createElement ('canvas'); let ctx = Canvas.getContext ("2d"); let avatar = new Image (); avatar.src ='.. / src/xx.png';avatar.onload = (scaleBy = 2) = > {circleImg (ctx, avatar, avatarX * scaleBy, avatarY * scaleBy, avatarW * scaleBy / 2);} / / r: radius function circleImg (ctx, img, x, y, r) {ctx.save (); var d = 2 * r; var cx = x + r Var cy = y + r; ctx.arc (cx, cy, r, 0,2 * Math.PI); ctx.clip (); ctx.drawImage (img, x, y, d, d); ctx.restore () } the above is about the content of this article on "how to draw a rounded head portrait in html5". I believe we all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.