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

进阶的码农

于 2018-08-20 13:59:50 发布

阅读量6.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签： canvas 微信小程序绘制圆形图片

本文链接：https://blog.csdn.net/wangguang1995/article/details/81869984

微信小程序专栏收录该内容

28 篇文章

订阅专栏

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(); //恢复之前保存的绘图上下文 恢复之前保存的绘图问下文即状态 还可以继续绘制