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();
    }

 

 以上基於圓型來算頂點坐標的方法是常用方法