JavaScript图形实例：波形组合图案
1．波形图案
采用正弦函数可以绘制正弦波形图案。编写如下的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文件内容如下。
将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以看到在画布中绘制出的波形组合图案，如图5所示。
图5 波形组合图案
3．还是波形组合图案
仿照上面的思路，可编写如下的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 另一种两波形组合图案
