畢達哥拉斯樹怎麼用JS實現

這次帶給大家畢達哥拉斯樹怎樣用JS實現，畢達哥拉斯樹用JS實現的注意事項有哪些，下面就是實戰案例，一起來看一下。

效果如下：

主要方法

1. translate()

2. rotate()

3. rect()

4. push()

5. pop()

6. map()

#主要想法

##遞迴

草圖

#程式分解

一、畢達哥拉斯樹的遞歸函數

function Pythagorian(x){
 noStroke();
 fill(107, 142, 35,map(x, 0, a, 150, 255));//根据正方形边长设置填充色
 rect(0,0,x,x);//绘制当前的正方形
 
 if(x <p style="text-align: left;">#二、宣告變數、建立畫布<strong></strong></p><pre class="brush:php;toolbar:false">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 ###相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！ ######推薦閱讀：#########JS原始值與參考值有哪些儲存方式###############Vue如何將篩選器格式化###############Angular中第三方UI框架、控制項使用步驟詳解#########

以上是畢達哥拉斯樹怎麼用JS實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！