为了账号安全,请及时绑定邮箱和手机立即绑定

canvas 正五角星如何画

canvas 正五角星如何画

lechenging 2014-11-15 15:22:28
看网站有这个,但看不懂怎么画的,请大牛指教
查看完整描述

1 回答

?
freeeWilll

TA贡献3条经验 获得超4个赞

给你一个正五角星的画法示例吧。如下:

<!doctype html>
<html>
<head>
</head>
<body>
<canvas id="canvas" style="border:1px solid black;display:block;margin:50px auto;"></canvas>
<script>
window.onload=function()
{
	var cvs=document.getElementById('canvas');
	var cxt=cvs.getContext('2d');
	cvs.width=800;
	cvs.height=800;
	
	drawStar(cxt,80,300,400,400,30);
	
	function drawStar(cxt,r,R,x,y,rot)
	{
		cxt.beginPath();
		for(var i=0;i<5;i++)
		{
			cxt.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*R+x,
			-Math.sin((18+i*72-rot)/180*Math.PI)*R+y);
			cxt.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*r+x,
			-Math.sin((54+i*72-rot)/180*Math.PI)*r+y);
		}
		cxt.closePath();
	}
	
	cxt.lineWidth=10;
	cxt.stroke();
}
</script>
</body>
</html>


查看完整回答
反对 回复 2016-02-16
  • 1 回答
  • 2 关注
  • 4258 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信