本文主要是介绍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文件。
这篇关于JavaScript动画实例:圆点的衍生的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!