Si la page Web que vous souhaitez dessiner contient une image sur toile d'un avatar en forme d'arc, mais que l'avatar lui-même est carré, la méthode requise est la suivante :
Tout d’abord, récupérez les coordonnées, la largeur et la hauteur de l’avatar sur la toile : (je n’entrerai pas dans les détails ici sur la façon de l’obtenir)
soit {avatarX, avatarY, avatarW, avatarH} = {20, 20, 80, 80} ;Il suffit ensuite d'appeler la fonction suivante :
laissez 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 : fonction de rayon circleImg(ctx, img, x, y, r) { ctx.save(); var d =2 * r; ctx.arc(cx, cy, r, 0, 2 * Math.PI); ctx.drawImage(img, x, y, d, d); ctx.restore();}Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.