这次给大家带来毕达哥拉斯树怎样用JS实现，毕达哥拉斯树用JS实现的注意事项有哪些，下面就是实战案例，一起来看一下。
效果如下：
主要方法
translate()
rotate()
rect()
push()
pop()
map()
主要思想
递归
草图
过程分解
一、毕达哥拉斯树的递归函数
function Pythagorian(x){ noStroke(); fill(107, 142, 35,map(x, 0, a, 150, 255));//根据正方形边长设置填充色 rect(0,0,x,x);//绘制当前的正方形 if(x <= 3) return 0;//当正方形边长小于3时，结束递归 /* 绘制右上角的正方形 */ push(); rotate(PI / 2 - t);//坐标轴顺时针旋转约37deg translate(0,-x/5 * 3 - x/5*4);//坐标轴向上平移3边+4边的长度 Pythagorian(x/5*4);//递归调用毕达哥拉斯函数 pop(); /* 绘制左上角的正方形 */ push(); rotate( - t);//坐标轴逆时针旋转约53deg translate(0,-x/5 * 3);//坐标轴向上平移3边的长度 Pythagorian(x/5*3);//递归调用毕达哥拉斯函数 pop(); }
登录后复制
二、声明变量、创建画布
var a = 100; //最大正方形边长var t;//4边所对应的角度function setup(){ t = 53.1301024 / 360 * 2 * PI;//约为53deg createCanvas(windowWidth, windowHeight);//创建画布 background(255); noLoop();//draw()函数只执行一次}
登录后复制
三、开始绘制毕达哥拉斯树
function draw(){ translate(windowWidth/2, windowHeight - a * 2);//将坐标系平移至画布中间底部 Pythagorian(a);//调用毕达哥拉斯递归函数}
登录后复制
绘制毕达哥拉斯树完整代码
var a = 100;var t;function setup(){ t = 53.1301024 / 360 * 2 * PI; createCanvas(windowWidth, windowHeight); background(255); noLoop();}function draw(){ translate(windowWidth/2, windowHeight - a * 2); Pythagorian(a); }function Pythagorian(x){ noStroke(); fill(107, 142, 35,map(x, 0, a, 150, 255)); rect(0,0,x,x); if(x <= 3) return 0; push(); rotate(PI / 2 - t); translate(0,-x/5 * 3 - x/5*4); Pythagorian(x/5*4); pop(); push(); rotate( - t); translate(0,-x/5 * 3); Pythagorian(x/5*3); pop(); }
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
JS原始值与引用值有哪些储存方式
Vue如何将过滤器格式化
Angular中第三方UI框架、控件使用步骤详解
以上就是毕达哥拉斯树怎样用JS实现的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2764751.html
