• 不断学习才有回报,学无止境!

使用canvas旋转n角星效果

javascript技巧 箭翎 395次浏览 0个评论 扫描二维码

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')

canvas旋转n角星


箭翎 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明使用canvas旋转n角星效果
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址