微信小程序画布arc截取圆形图片

时间：2019-05-16 12:39:11 收藏：0 阅读：280

画布提供了一种可以创建圆的方法

arc(x, y, r, s, e, counterclockwise)

x,y：圆心
r：圆的半径
s：起始弧度 (0)
e：终止弧度 (1.5 * Math.PI)
counterclockwise：弧度的方向是否是逆时针

原图　　　　　　　　　　　　　　截取之后的图

　　技术图片　　　　　　　　　　　　　　　　　　

首先确定图片位置x和y值，然后确定图片大小，r就为图片一半，因为图片起始点是(x,y),所以圆心的位置为(x+r,y+r)

var headpic =‘../../../images/tabBar_two/dynamic.png‘;
    ctx.beginPath()
    ctx.arc(20+60, 20+60, 60, 0, 2 * Math.PI); 
    ctx.fill();
    ctx.clip()  //剪切形状
    ctx.drawImage(headpic, 20, 20, 120, 120);
    ctx.draw();

微信小程序 画布arc截取圆形图片

微信小程序画布arc截取圆形图片