使用canvas旋转n角星效果

javascript部分代码

<canvas id="canv1"></canvas>
	!function(id){
		var canvas=document.getElementById(id);
		canvas.width=800;
		canvas.height=600;
		var context=canvas.getContext('2d');
		context.fillStyle='#eef';
		context.fillRect(0,0,800,600);
		context.translate(300,80);
		context.fillStyle='rgba(255,0,0,0.25)';
		context.shadowOffsetY=5;
		context.shadowOffsetX=5;
		context.shadowColor='rgba(0,0,0,.75)';
		context.shadowBlur=7.5;
		for(var i=0;i<70;i++){
			context.translate(25,25);
			context.scale(.95,.95);
			context.rotate(Math.PI/10);
			createStars(context,13);
			context.fill();
		}
		//创建n角形
		function createStars(context,n){
			context.beginPath();
			context.fillStyle='rgba(255,0,0,.25)';
			var x,y;
			var dig=n%2==0?Math.PI/n*(n-2):Math.PI/n*(n-1);
			for(var i=0;i<n;i++){
				x=Math.sin(i*dig);
				y=Math.cos(i*dig);
				context.lineTo(200+x*50,50+y*50);
			}
			context.closePath();
		}
	}('canv2')