javascript如何利用svg绘制五角星

阿酷| 阅读:519 发表时间:2017-06-29 19:48:12 前端技术

最近在制作一个项目时,客户要求在省会地方放置一个五角星,这本身不复杂,不过我想通过svg实现,这样就可以控制五角星的颜色,大小以及制作相应的一些特效。但是在绘制的过程中,五角星的十个坐标点最为关键。现特整理一下坐标点的计算方式,共大家参考。

242dd42a2834349b214e696bc9ea15ce37d3be97.jpg

五角星的角到中心的距离为R;中心坐标为(0,0);假设外围五个点为k=0,1,2,3,4;则:

x=R*math.cos(2*3.14/360*72*k)    y=R*math.sin(2*3.14/360*72*k)

内圆的半径为r=Rsin18°/sin36°;假设内部的五个点为k=0,1,2,3,4;则:

x=R*math.sin(2*3.14/360*18)/math.sin(2*3.14/360*36)*math.cos(2*3.14/360*(72*k+36))    
y=R*math.sin(2*3.14/360*18)/math.sin(2*3.14/360*36)*math.sin(2*3.14/360*(72*k+36))

那么,svg的五角星路径就应该是:

var path="M";
for(var k=0;k<5;k++){
  if(k==4){
    path+=R*math.cos(2*3.14/360*72*k)+" "+R*math.sin(2*3.14/360*72*k)+"L"+R*math.sin(2*3.14/360*18)/math.sin(2*3.14/360*36)*math.cos(2*3.14/360*(72*k+36)) +" "+R*math.sin(2*3.14/360*18)/math.sin(2*3.14/360*36)*math.sin(2*3.14/360*(72*k+36))+"Z";
  }else{
    path+=R*math.cos(2*3.14/360*72*k)+" "+R*math.sin(2*3.14/360*72*k)+"L"+R*math.sin(2*3.14/360*18)/math.sin(2*3.14/360*36)*math.cos(2*3.14/360*(72*k+36)) +" "+R*math.sin(2*3.14/360*18)/math.sin(2*3.14/360*36)*math.sin(2*3.14/360*(72*k+36))+"L";
  }
}

讲上述path带入svg当中即可;如果中心坐标不是(0,0);则在原有的xy坐标加上相应的偏移量即可。

本文由阿酷发表并编辑,转载此文章须经作者同意,并请附上出处及本页链接。如有侵权,请联系本站删除。