微信小程序canvas绘制圆形头像

context.save();
//绘制头像
context.beginPath(); //开始绘制
//先画个圆,前两个参数确定了圆心 (x,y) 坐标  第三个参数是圆的半径  四参数是绘图方向  默认是false,即顺时针
context.arc(42 / 2 + 121, 42 / 2 + 210, 42 / 2, 0, Math.PI * 2, false);
context.clip(); //画好了圆 剪切  原始画布中剪切任意形状和尺寸。
一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内 这也是我们要save上下文的原因
context.drawImage(avatar, 121, 210, 42, 42);
context.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图问下文即状态 还可以继续绘制

 

你可能感兴趣的:(微信小程序)