用canvas画一个五角星

h5部分：

        <canvas id="canvas">
            您的浏览器不支持canvas，请升级浏览器。
        </canvas>

javascript部分：

<script type="text/javascript">
	var canvas = document.getElementById("canvas");
	var ctx = canvas.getContext("2d");
	canvas.width = 300;
	canvas.height = 300;
	canvas.style.border = "1px solid #ccc";
	
	function create5star(ctx,r,R,x,y,fillColor,strokeColor){
		ctx.beginPath();
		ctx.lineWidth = 5;
		ctx.fillStyle = fillColor;
		ctx.strokeStyle = strokeColor;
		for(var i=0;i<5;i++){
			var x1 = Math.cos((18+72*i)*Math.PI/180);
			var y1 = Math.sin((18+72*i)*Math.PI/180);
			var x2 = Math.cos((54+72*i)*Math.PI/180);
			var y2 = Math.sin((54+72*i)*Math.PI/180);
			ctx.lineTo(x1*R+x,-y1*R+y);
			ctx.lineTo(x2*r+x,-y2*r+y);
		}
		ctx.closePath();
		ctx.stroke();
		ctx.fill();
	}
	
	create5star(ctx,30,60,150,150,"yellow","greenyellow");
</script>

效果展示：　

角度说明：