JavaScript圖形實例：正多邊形

時間 2019-12-24

標籤 javascript 圖形實例正多邊形欄目 JavaScript 简体版

原文原文鏈接

圓心位於座標原點，半徑爲R的圓的參數方程爲javascript

X=R*COS(θ)html

Y=R*SIN(θ)java

在圓上取N個等分點，將這N個點首尾鏈接N條邊，能夠獲得一個正N邊形。canvas

1．正多邊形陣列

構造一個8行8列的正N（N爲3~10）邊形陣列。編寫以下的HTML代碼。瀏覽器

<!DOCTYPE html>3d

<head>htm

<title>正多邊形陣列</title>blog

function draw(id)get

{

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

}

context.stroke();

}

</script>

</head>

<canvas id="myCanvas" width="400" height="300">您的瀏覽器不支持canvas！

</canvas>

</body>

</html>

將上述HTML代碼保存到一個html文本文件中，再在瀏覽器中打開包含這段HTML代碼的html文件，能夠看到在瀏覽器窗口中繪製出邊長相等的正多邊形（從正三角形到正十邊形），如圖2所示。

圖2 邊長相等的正多邊形

3．漂亮的圓盤

在圓周上取N等分點，將這N個等分點兩兩用線段相連，共連N*(N-1)/2條邊，能夠繪製出圓盤圖案。編寫的HTML代碼以下。

<!DOCTYPE html>

<head>

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.strokeStyle="red";

context.lineWidth=1;

var x=new Array(25);

var y=new Array(25);

var r = 180;

var n=25;

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

{

x[i] = r * Math.cos(2 *Math.PI * i/n) + 200;

y[i] = r * Math.sin(2 *Math.PI * i/n) + 200;

}

context.beginPath();

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

{

for (j = i + 1; j <n ; j++)

{

context.moveTo(x[i],y[i]);

context.lineTo(x[j],y[j]);

}

context.closePath();

context.stroke();

}

</script>

</head>

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

</canvas>

</body>

</html>

在瀏覽器中打開包含這段HTML代碼的html文件，能夠看到在瀏覽器窗口中繪製出漂亮的圓盤圖案，如圖3所示。

圖3 圓盤圖案

4．頂點在圓周上的連續線段

前面例子中，圓周上取點的參數方程的夾角θ都在0~2π之間，若將θ乘以一個參數k，可繪製出一些有趣的圖形。編寫的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,300,300);

context.fillStyle = "cyan";

context.strokeStyle = 'red';

context.lineWidth=1;

var k=11;

var dig=Math.PI/12*k;

var radius=100;

var dx = 150;

var dy = 150;

context.beginPath();

var x = radius*Math.sin(0)+dx;

var y = radius*Math.cos(0)+dy;

context.moveTo(x,y);

for(var i = 1; i < 24; i++)

{

var x = radius*Math.sin(i * dig);

var y = radius*Math.cos(i * dig);

context.lineTo(dx+x,dy+y);

}

context.closePath();

context.fill();

context.stroke();

}

</script>

</head>

<canvas id="myCanvas" width="300" height="300">您的瀏覽器不支持canvas！

</canvas>

</body>

</html>

在瀏覽器中打開包含這段HTML代碼的html文件，能夠看到在瀏覽器窗口中繪製出如圖4所示的圖案。

圖4 頂點在圓周上的連續線段

仿圖4圖形繪製的方法，咱們不繪製直線，而是繪製貝塞爾曲線。編寫以下的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="#EEEEDD";

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

context.fillStyle = 'cyan';

context.strokeStyle = 'red';

context.globalCompositeOperation ='and';

context.lineWidth=1;

var dig=Math.PI/15*11;

var radius=100;

var dx = 150;

var dy = 150;

context.beginPath();

for(var i = 0; i < 30; i++)

{

var x = radius*Math.sin(i * dig);

var y = radius*Math.cos(i * dig);

context.bezierCurveTo(dx+x,dy+y-100,dx+x+100,dy+y,dx+x,dy+y);

}

context.closePath();

context.fill();

context.stroke();

}

</script>

</head>

<canvas id="myCanvas" width="300" height="300">您的瀏覽器不支持canvas！

</canvas>

</body>

</html>

在瀏覽器中打開包含這段HTML代碼的html文件，能夠看到在瀏覽器窗口中繪製出如圖5所示的圖案。

圖5 終點分佈在圓周上的貝塞爾曲線

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。