The canvas applet draws a round avatar with a border

The enclosed wechat applet canvas draws a round head picture with a border; Note that the URL cannot be a network picture, if it is, please cooperate with wx.getimageInfo () to obtain Tencent temporary address;

DrawCircle (CTX, width, height, x, y, url, radio) {// First argument: create canvas object // second argument: width of rectangle // third argument: height of rectangle // fourth argument: // Sixth argument: the URL of the drawing image // seventh argument: the device scaling ratio ctx.save(); ctx.arc(width / 2 + x, height / 2 + y, width / 2 + 5 * radio, 0, Math.PI * 2, false); ctx.setFillStyle('#fff') ctx.fill() ctx.clip(); ctx.beginPath(); ctx.arc(width / 2 + avatarurl_x, height / 2 + y, width / 2, 0, Math.PI * 2, false); ctx.clip(); ctx.drawImage(url, x, y, width, height); ctx.restore(); }Copy the code