微信小程序canvas画圆头像

wxml:

<canvas canvas-id="myCanvas" />

wxss:
canvas{
  width:375px;
  height:100px
}

js
const headImge = 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1499645618,2237231584&fm=26&gp=0.jpg'
 //百度的随便头像图  在真正的项目中需要先使用 wx.getImageInfo下载头像后的路径
const headWH = 160 / 2 //头像的框高
const ctx = wx.createCanvasContext('myCanvas')
ctx.setFillStyle("#fff") 白色背景
ctx.fillRect(0, 0, 750, 100)//画布框高 x y w h
ctx.fillRect(0, 0, headWH, headWH) //画一个头像的框
{
    let avatarurl_width = headWH; //绘制的头像宽度
    let avatarurl_heigth = headWH; //绘制的头像高度
    let avatarurl_x = 0; //绘制的头像在画布上的位置
    let avatarurl_y = headWH; //绘制的头像在画布上的位置
        ctx.save();
        ctx.beginPath(); //开始绘制
            //先画个圆   前两个参数确定了圆心 （x,y） 坐标  第三个参数是圆的半径  四参数是绘图方向  默认是false，即顺时针
        ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false);
        ctx.clip(); //画好了圆 剪切  原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内 这也是我们要save上下文的原因
        ctx.drawImage(headImge, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth); // 推进去图片，必须是https图片
        ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 还可以继续绘制
        }

以上就是画圆的源码 有需要的朋友 可 copy 尝试
一起加油！！！