首頁猿問 canvas 正五角星如何畫

canvas 正五角星如何畫

Html5

lechenging 2014-11-15 15:22:28

看網(wǎng)站有這個(gè)，但看不懂怎么畫的，請大牛指教

查看完整描述

1 回答

freeeWilll

TA貢獻(xiàn)3條經(jīng)驗(yàn) 獲得超4個(gè)贊

給你一個(gè)正五角星的畫法示例吧。如下：

<!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>

反對回復(fù) 2016-02-16