码迷,mamicode.com
首页 > 微信 > 详细

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

时间:2019-05-16 12:39:11      阅读:280      评论:0      收藏:0      [点我收藏+]

标签:技术   span   clock   大小   alt   tab   adp   微信小程序   height   

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

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截取圆形图片

标签:技术   span   clock   大小   alt   tab   adp   微信小程序   height   

原文地址:https://www.cnblogs.com/dongzhi1111/p/10874818.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!