画五角星-函数化<br>
<canvas id="test-canvas" width="800" height="600" style="border:1px solid red;"></canvas>
<script>
var canvas = document.getElementById('test-canvas');
var ctx = canvas.getContext('2d');
/**参数列表
ctx: context,
x0,y0 圆心
R,r 大圆、小圆半径
*/
function star(ctx, x0,y0, R,r, rotateAngle=0,strokeStyle="red",fillStyle="yellow", lineWidth=10){
	ctx.lineWidth=lineWidth;
	ctx.strokeStyle=strokeStyle
	ctx.fillStyle=fillStyle;
	var delta=2*Math.PI/5;
	var startAngle=-Math.PI/2+delta-rotateAngle;
	//
	ctx.beginPath()
	for(var i=0;i<5;i++){
		ctx.lineTo(x0+R*Math.cos(startAngle+delta*i), y0+R*Math.sin(startAngle+delta*i) );
		ctx.lineTo(x0+r*Math.cos(startAngle+delta/2+delta*i), y0+r*Math.sin(startAngle+delta/2+delta*i) );
	}
	ctx.closePath();
	ctx.fill();
	ctx.stroke();
}
var R=200, r=80
star(ctx, 250,250,R,r)
star(ctx, 250,250,0.7*R,0.7*r,Math.PI/5,"blue",'rgba(0,0,0,0.2)',2)
star(ctx, 50,50,50,20,Math.PI/5,"blue",'rgba(0,255,0,0.2)',2)
</script>