JavaScript图形实例:Koch曲线    

      Koch曲线的构造过程是:取一条长度为L0的直线段,将其三等分,保留两端的线段,将中间的一段改换成夹角为60度的两个等长直线;再将长度为L0/3的4个直线段分别进行三等分,并将它们中间的一段均改换成夹角为60度的两段长为L0/9的直线段;重复以上操作直至无穷,可得以一条具有自相似结构的折线,如图1所示。

JavaScript图形实例:Koch曲线_Koch曲线

图1  Koch曲线的生成

Koch曲线采用递归过程易于实现,编写如下的HTML代码。





      在浏览器中打开包含这段HTML代码的html文件,可以看到在浏览器窗口中绘制出的Koch曲线,如图2所示。

 JavaScript图形实例:Koch曲线_Koch曲线_02

图2  递归深度maxdepth =5的Koch曲线

      由图1和2可知,Koch曲线的初始图元是直线,但最终结果却是一条参差不齐的曲线,很像雪花的边缘,如果将3条这样的曲线围在一起,便得到Koch雪花的图案。这样,初始图元不是一条直线,而是一个等边三角形。Koch雪花的生成示例如图3所示。

 JavaScript图形实例:Koch曲线_JavaScript_03

图3  Koch雪花的生成

      在程序设计时,定义好等边三角形的三个顶点坐标,调用三次Koch递归过程,以实现等边三角形三条边各自的Koch曲线生成,即可得到Koch雪花图案。编写的HTML文件如下。





      在浏览器中打开包含这段HTML代码的html文件,在浏览器窗口中可能会绘制出如图4所示的Koch雪花图案。

 JavaScript图形实例:Koch曲线_JavaScript_04

图4  递归深度maxdepth =5的Koch雪花图案