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  另一种两波形组合图案