darwAvatarArc: function(ctx, src, x, y, w, h = w){
/*
ctx: 画布对象
src: 头像缓存路径
x: 头像起始位置 横坐标
y: 头像起始位置 纵坐标
w: 头像宽度
h: 头像高度,不传为w
*/
// 保存绘图上下文。
ctx.save();
// 开始创建一个路径。需要调用 fill 或者 stroke 才会使用路径进行填充或描边
ctx.beginPath()
// 设创建一个圆可以指定 起始弧度为 0,终止弧度为 2 * Math.PI。
// 用 stroke 或者 fill 方法来在 canvas 中画弧线。
ctx.arc(x+w/2, y+h/2, w/2, 0, Math.PI * 2, false);
/* 从原始画布中剪切任意形状和尺寸。
一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内(
不能访问画布上的其他区域)。可以在使用 clip 方法前通过使用 save 方法对当前画布区域进行保存,并在以后的任意时间通过restore方法对其进行恢复。
*/
ctx.clip()
// 画头像
ctx.drawImage(src, x, y, w, h);
// 恢复之前保存的绘图上下文。
ctx.restore()
// 将之前在绘图上下文中的描述(路径、变形、样式)画到 canvas 中。
ctx.draw(true)
}
小程序代码片段:https://developers.weixin.qq.com/s/z4J5TOmz7Y68