Home > Developer > Web Develop
Occasionally see Fibonacci Helix (Golden Spiral) Definition and drawing method, try to use JS draw a bit, very beautiful, very fun
The concrete definition and the descriptive drawing everybody to look for has, very simple.
Here's the code:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Fibonaccisequence</title></Head><Body><CanvasID= "MyCanvas"width= "+"Height= "$"style= "Background-color: #ddd;"></Canvas><inputtype= "text"onchange= "Draw_many (parseint (this.value))" /><Scripttype= "Text/javascript">varCanvas=document.getElementById ('MyCanvas');varCTX=Canvas.getcontext ('2d');//The optimized Fibonacci sequence is used to save the result of the sequence in an array .//It's too slow to use traditional recursion, too much memory.varFib_val= [0,1]functionfib (n) {varLen=fib_val.length; for(varI=Len; I<=N; I++) {Fib_val.push (fib_val[i-1] +Fib_val[i-2] ) } returnFib_val[n]}//Draw Fibonacci Helix (Golden Spiral)//n indicates how many columns to calculatefunctionDraw (n) { for (varI= 1; I<N; I++) { varLen=fib (i); //Ctx.strokerect (0,0,len,len)//Draw a rectangle, you can see the principle of production //Draw FanCtx.beginpath (); Ctx.arc (Len,0, Len,math.pi/2,2*math.pi/2); Ctx.stroke (); //move the origin to the diagonal of the original point and rotate it 270 degrees . //It's easy to draw.ctx.translate (len, Len) ctx.rotate (3*Math.PI/2); };}//draw a lot of spirals, pretty.functionDraw_many (n) {var Total=N//Clear CanvasCtx.clearrect (0,0, -, -); for(varI=0; I<Total;i++){ //Save the state so that it's good to restore the state like the origin.Ctx.save (); //Center moves to the middle of the canvasCtx.translate ( -, -); //draw a spin a littleCtx.rotate ( the/Total*i*math.pi/ the); Draw ( the); //Recovery StatusCtx.restore (); }}//draw 180 lines, very beautifulDraw_many ( the)</Script> </Body></HTML>
Here is the effect, try to change the number of pictures to see, press enter to see the effect
Enter the number of lines you want to draw: Display RectangleUse JS to draw Fibonacci Helix (Golden Helix)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
