JavaScript图形实例：正多边形

合集下载

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

JavaScript图形实例：正多边形

圆心位于坐标原点，半径为R的圆的参数方程为

X=R*COS(θ)

Y=R*SIN(θ)

在圆上取N个等分点，将这N个点首尾连接N条边，可以得到一个正N边形。1．正多边形阵列

构造一个8行8列的正N（N为3~10）边形阵列。编写如下的HTML代码。

<!DOCTYPE html>

<head>

<title>正多边形阵列</title>

function draw(id)

{

var canvas=document.getElementById(id);

if (canvas==null)

return false;

var context=canvas.getContext('2d');

context.fillStyle="#EEEEFF";

context.fillRect(0,0,400,400);

context.fillStyle="yellow";

context.strokeStyle="red";

context.lineWidth=1;

context.beginPath();

for (px=30;px<390;px+=45)

for (py=30;py<390;py+=45)

{

n=((px-30)/45+(py-30)/45)%8+3;

for (i=0;i<=n;i++)

{

x1=20*Math.cos(i*Math.PI*2/n);

y1=20*Math.sin(i*Math.PI*2/n);

x=px+x1;

y=py+y1;

if (i==0)

context.moveTo(x,y);

else

context.lineTo(x,y);

}

context.closePath();

context.stroke();

context.fill();

}

</script>

</head>

<canvas id="myCanvas" width="400" height="400">您的浏览器不支持canvas！

</canvas>

</body>

</html>

将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML 代码的html文件，可以看到在浏览器窗口中绘制出正3~10边形阵列，如图1所示。

图1 正3~10边形阵列

2．边长相等的正多边形

图1中的正N边形通过在圆周上取N等分点得到的，它们的外接圆的半径均相等，但各自的边长并不相等。若要绘制出边长相等的正N边形，可以编写如下的HTML文件。

<!DOCTYPE html>

<head>

<title>边长相等的正多边形</title>

function draw(id)

{

var canvas=document.getElementById(id);

if (canvas==null)

return false;

var context=canvas.getContext('2d');

context.fillStyle="#EEEEFF";

context.fillRect(0,0,400,300);

context.strokeStyle="blue";

context.lineWidth=2;

var x0=150;

var y0=30;

context.beginPath();

for (n=3;n<=10;n++)

{

dig=6.28318/n;

context.moveTo(x0,y0);

x=x0;

y=y0;

for(i=0;i<n;i++)

{

x=x+80*Math.cos(i*dig);

y=y+80*Math.sin(i*dig);

context.lineTo(x,y);

}

context.lineTo(x0,y0);

}