天马行空工作室

 找回密码
 加入天马
搜索
查看: 2203|回复: 0

canvas实现斐波拉契曲线(1)

[复制链接]
发表于 2015-4-14 11:07:12 | 显示全部楼层 |阅读模式
demo地址:http://tmxk.org/fblq/ 12.png
首先生成斐波拉契数组,然后画曲线,曲线是一个个半径为斐波拉契数列的1/4圆拼接起来的。

难点是圆心移位。
生成斐波拉契数组
  1.         var s=[0,1]
  2.         while(s.length<16) s.push(s[s.length-2]+s[s.length-1])
复制代码

小于16是限制大小,太大画不下。
然后圆心移动轨迹逻辑,定义为顺时针,则其坐标移动向量为
  1. var l=[[-1,0],[0,-1],[1,0],[0,1]]
复制代码
然后定时画曲线做成动画

  1.         var s=[0,1],l=[[-1,0],[0,-1],[1,0],[0,1]],o=[300,300],i=0
  2.         while(s.length<16) s.push(s[s.length-2]+s[s.length-1])
  3.         var c=document.getElementById("myfblq").getContext("2d");
  4.         c.strokeStyle="blue"
  5.         var x=setInterval(function(){
  6.             c.beginPath()
  7.             if( i>1)
  8.             {
  9.                 o[0]+=l[i%4][0]*s[i-2]
  10.                 o[1]+=l[i%4][1]*s[i-2]
  11.             }
  12.             c.arc(o[0],o[1],s[i],i%4*Math.PI/2,(i%4+1)*Math.PI/2,false)
  13.             c.stroke()
  14.             c.closePath()
  15.             if(++i>15) {
  16.                 clearInterval(x)
  17. }},200)
复制代码




您需要登录后才可以回帖 登录 | 加入天马

本版积分规则

Archiver|手机版|小黑屋|天马行空工作室 ( 京ICP备12003429号  

GMT+8, 2018-12-18 21:19 , Processed in 0.307613 second(s), 23 queries .

Powered by Discuz! v8

© 2010-2014 canvas实现斐波拉契曲线(1) - 编程讨论 天马行空工作室

快速回复 返回顶部 返回列表