JavaScript动画实例：圆点的衍生

本文主要是介绍JavaScript动画实例：圆点的衍生，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

考虑如下的曲线方程：

      R=S*sqrt(n)α=n*θX=R*SIN(α)Y=R*COS(α)    其中，S和θ可指定某一个定值。对n循环取0~999共1000个值，对于每个n，按照给定的坐标方程，求得一个坐标值(x,y)，然后以（x,y）为圆心绘制一个半径为6的圆，可以得到一个螺旋状的图形。

编写如下的HTML代码。

  在浏览器中打开包含这段HTML代码的html文件，可以看到在画布中绘制出如图1所示的图案。

图1 scale = 10，theta = 30时绘制的图案

  若将上面程序中的语句“var theta = 30; ”改写为“var theta =60; ”，其余部分保持不变，则在画布中绘制出如图2所示的图案。

图2 scale = 10，theta = 60时绘制的图案

  在程序中，theta代表每个小圆圆心相对于上一个小圆圆心的偏移角度。一个圆周360°，因此当theta = 30时，会绘制出360/30=12条放射状的线，如图1所示；当theta =60时，会绘制出360/60=6条放射状的线，如图2所示。若将上面程序中的语句“var theta = 30; ”改写为“var theta =110; ”，其余部分保持不变，则在画布中绘制出如图3所示的图案。

图3 scale = 10，theta =110时绘制的图案

  若再将程序中的语句“var scale = 10; ”改写为“var scale =6; ”，则在画布中绘制出如图4所示的图案。

图4 scale = 6，theta =110时绘制的图案

  若将程序中的语句“var scale = 10; ”改写为“var scale =15; ”，则在画布中绘制出如图5所示的图案。

图5 scale = 15，theta =110时绘制的图案

  对比图3、4、5可知，scale的值可以可知各小圆的疏密程度。将上面程序中1000个小圆的绘制过程动态展示出来，编写如下的HTML文件。

深圳网站建设www.sz886.com

这篇关于JavaScript动画实例：圆点的衍生的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---