1．波形圖案
采用正弦函數可以繪制正弦波形圖案。編寫如下的HTML代碼。
<!DOCTYPE html>
<head>
<title>波形圖案</title>
<script type="text/javascript">
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 (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>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="360" height="360" style="border:3px double #996633;">
</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>
<script type="text/javascript">
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>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="360" height="360" style="border:3px double #996633;">
</canvas>
</body>
</html>
將上述HTML代碼保存到一個html文本文件中，再在瀏覽器中打開包含這段HTML代碼的html文件，可以看到在畫布中繪制出的波形組合圖案，如圖5所示。
圖5 波形組合圖案
3．還是波形組合圖案
仿照上面的思路，可編寫如下的HTML代碼。
<!DOCTYPE html>
<head>
<title>另一波形組合圖案</title>
<script type="text/javascript">
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 onload="draw('myCanvas');">
<canvas id="myCanvas" width="360" height="360" style="border:3px double #996633;"></canvas>
</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 另一種兩波形組合圖案