JavaScript圖形實例：波形組合圖案

時間 2020-06-29

標籤 javascript 圖形實例波形組合圖案欄目 JavaScript 简体版

原文原文鏈接

1．波形圖案

採用正弦函數能夠繪製正弦波形圖案。編寫以下的HTML代碼。javascript

<!DOCTYPE html>html

<head>java

<title>波形圖案</title>canvas

function draw(id)函數

{3d

var canvas=document.getElementById(id);rest

if (canvas==null)htm

return false;blog

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

context.fillStyle="#EEEEFF";

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

context.strokeStyle="red";

context.lineWidth=1;

context.save();

context.translate(180,180);

context.beginPath();

for (fy=-45; fy<=45;fy+=6) // 繪製16條正弦曲線構成波形

for (x=-180;x<=180;x+=6)

{

y=135/180*x+fy+30*Math.sin(4*x*Math.PI/360);

if (x==-180) context.moveTo(x,y);

else context.lineTo(x,y);

}

context.stroke();

context.restore();

}

</script>

</head>

</canvas>

</body>

</html>

將上述HTML代碼保存到一個html文本文件中，再在瀏覽器中打開包含這段HTML代碼的html文件，能夠看到在畫布中繪製出的波形圖案1，如圖1所示。

圖1 按座標（x,y）繪製的波形圖案1

圖1中的波形按座標點（x,y）連線進行繪製，若按座標（-x,y）繪製可得如圖2所示的波形圖案2；若按座標（y,x）繪製可得如圖3所示的波形圖案3；若按座標（y,-x）繪製可得如圖4所示的波形圖案4。

圖2 按座標（-x,y）繪製的波形圖案2

圖3 按座標（y,x）繪製的波形圖案3

圖4 按座標（y,-x）繪製的波形圖案4

2．波形組合圖案

咱們將圖1~圖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="#EEEEFF";

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

context.strokeStyle="red";

context.lineWidth=1;

context.save();

context.translate(180,180);

context.beginPath();

for (m=-1;m<=1;m+=2)

for (n=1;n<=2;n++)

for (fy=-45; fy<=45;fy+=6)

for (a=-180;a<=180;a+=6)

{

x=m*a;

y=135/180*a+fy+30*Math.sin(4*a*Math.PI/360);

if (n==2) { t=x; x=y; y=t; }

if (a==-180) context.moveTo(x,y);

else context.lineTo(x,y);

}

context.stroke();

context.restore();

}

</script>

</head>

</canvas>

</body>

</html>

將上述HTML代碼保存到一個html文本文件中，再在瀏覽器中打開包含這段HTML代碼的html文件，能夠看到在畫布中繪製出的波形組合圖案，如圖5所示。

圖5 波形組合圖案

3．仍是波形組合圖案

仿照上面的思路，可編寫以下的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,360,360);

context.strokeStyle="red";

context.lineWidth=1;

context.save();

context.translate(180,180);

context.beginPath();

for (m=-1;m<=1;m+=2)

for (n=1;n<=2;n++)

for (fy=0; fy<=360;fy+=10)

for (a=-180;a<=180;a+=6)

{

x=m*a;

y=180/360*(a-180)+fy/2+30*Math.sin(4*a*Math.PI/360);

if (n==2) { t=x; x=y; y=t; }

if (a==-180) context.moveTo(x,y);

else context.lineTo(x,y);

}

context.stroke();

context.restore();

}

</script>

</head>

</body>

</html>

將上述HTML代碼保存到一個html文本文件中，再在瀏覽器中打開包含這段HTML代碼的html文件，能夠看到在畫布中繪製出的另外一種波形組合圖案，如圖6所示。

圖6 另外一種波形組合圖案

咱們若將繪製圖6的HTML文件中的兩條語句

「for (n=1;n<=2;n++)」和「if (n==2) { t=x; x=y; y=t; }」刪除掉，

即只將按座標（x，y）繪製的波形與按座標（-x，y）繪製的波形組合，則在畫布中繪製出如圖7所示的波形組合圖案。

圖7 兩波形組合圖案

若只將繪製圖6的HTML文件中的語句「for (m=-1;m<=1;m+=2)」改寫爲「m=1；」，即只將按座標（x，y）繪製的波形與按座標（y，x）繪製的波形組合，則在畫布中繪製出如圖8所示的波形組合圖案。

圖8 另外一種兩波形組合圖案

相關標籤/搜索

每日一句

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