canvas绘图详解-06-绘制一个五角星-常用绘图原理

先讲如何画一个正规的五角星

在五角星的内外画两个圆，五角星有五个角，360/5=72度

所以得出这两个角的度数

 

 

然后算出这两个点坐标

 

 

角度转弧度

角度/180*Math.PI

 

所以外顶点坐标 x:  Math.cos( (18+72*i)/180*Math.PI) * R

                     y:  Math.sin((18+72*i)/180*Math.PI) * R

所以内顶点坐标 x:  Math.cos( (54+72*i)/180*Math.PI) * r

                     y:  Math.sin((54+72*i)/180*Math.PI) * r

 

下面是画一个不同角度不同大小的五角星的函数

function drawStar( cxt , r , R , x , y , rot , borderWidth , borderStyle , fillStyle){cxt.beginPath();for( var i = 0 ; i < 5 ; i ++){cxt.lineTo(Math.cos((18+72*i - rot)/180*Math.PI) * R + x ,- Math.sin((18+72*i - rot )/180*Math.PI) * R + y);cxt.lineTo(Math.cos((54+72*i - rot)/180*Math.PI) * r + x ,- Math.sin((54+72*i - rot )/180*Math.PI) * r + y);}cxt.closePath();cxt.lineWidth = borderWidth;cxt.strokeStyle = borderStyle;cxt.fillStyle = fillStyle;cxt.fill();cxt.stroke();}

 

 以上基于圆型来算顶点坐标的方法是常用方法