摘要：每周一點動畫代碼文件在上一節每周一點動畫物理效果中，我們介紹了維環境下的速度與加速度效果。與二維系統中的效果如出一轍。二叉樹二叉樹的類文件名為。與簡單樹的原理不一樣，二叉樹的原理是采用遞歸的方法實現樹枝與樹干的繪制。

每周一點canvas動畫代碼文件

在上一節《每周一點canvas動畫》——3D物理效果中，我們介紹了3維環境下的速度與加速度效果。這一節，我們繼續介紹另外兩個物理效果：重力和屏幕環繞。

三維系統中實現重力效果的方式與二維的情況一樣，設定一個重力值，比如g=0.2。然后，在動畫循環中將它作用于物體豎直方向的速度上。雖然原理上沒有什么大的變化，但是多了一個維度實現出來的效果確實相當具有視覺沖擊力的。ok，一圖勝千言，與其在這聽我嘚吧嘚吧嘚，還不如直接上個效果圖。

在動畫中，我們為小球的下落設置了一個邊界——相當于地面，并與反彈的效果結合在一起，當小球觸碰到地面發生反彈。與二維系統中的效果如出一轍。下面是核心代碼，具體代碼請看gravity.html：

    。。。
    function move(ball){
        ball.vy += gravity;   //重力加速度
        
        ball.xpos += ball.vx;
        ball.ypos += ball.vy;
        ball.zpos += ball.vz;
               
         if (ball.ypos > floor) {  //觸地反彈
               ball.ypos = floor;
               ball.vy *= bounce;
             }
         if(ball.zpos > -fl){   //3維場景設置
            var scale = fl/(fl + ball.zpos);
            ball.scaleX = ball.scaleY = scale;
            ball.x = vpX + ball.xpos * scale;
            ball.y = vpY + ball.ypos * scale;
            ball.visible = true;
         }else{
             ball.visible = false;
         }
 }
 。。。

屏幕環繞是我們今天的重頭戲，與二維環境中的概念一樣。所謂屏幕環繞就是從屏幕的這端消失，相應的從屏幕的另一邊出來。對應到三維的環境中，我們就多了一個緯度的選擇。下面我們介紹第一個效果——森林

繪制森林前我們要做的第一個準備工作是繪制森林的基本組成單元——tree。在這里我提供了3個樹的類文件。

tree.js ——簡單樹

binaryTree.js ——二叉樹

natureTree.js ——自然樹

與球類文件的引入和使用方式一樣,下面我們展示一下三種文件的繪制效果。

1.簡單樹

簡單樹的繪制效果如圖所示，如果你想要讓它的枝條更多，再多加兩條樹枝就可以了。類文件tree.js,沒有什么特別的，只是用到簡單的lineTo,moveTo 等API。

2.二叉樹

二叉樹的類文件名為binaryTree.js。與簡單樹的原理不一樣，二叉樹的原理是采用遞歸的方法實現樹枝與樹干的繪制。繪制效果如圖：

具體代碼如下：

/* gen: 樹枝的節點代數，默認是6個節點*/
/* angle: 每次在節點樹枝的旋轉角度*/
/* branchLength: 樹枝的長度*/

function Tree(color, angle, genNum, branchLength){
    this.x = 0;
    this.y = 0;
    this.xpos = 0;
    this.ypos = 0;
    this.zpos = 0
    this.scaleX = 0.85;
    this.scaleY = 0.85;
    this.gen = 0;
    this.alpha = 1;
    this.color = utils.parseColor(color);
    this.angle = (angle === undefined) ? 0.3 : angle;
    this.genNum = (genNum === undefined) ? 6 : genNum;
    this.branchLength = (branchLength === undefined) ? 40 : branchLength;
    
}

Tree.prototype.draw = function(ctx){
    ctx.save()
    ctx.translate(this.x, this.y);
    this.branch(ctx, 0);           //初始角度為0， 繪制樹干
    ctx.restore();
}

Tree.prototype.branch= function(ctx, initAngle){
    this.gen++;
    ctx.save();
    ctx.strokeStyle = this.color;
    ctx.rotate(initAngle);
    ctx.scale(this.scaleX, this.scaleY);

    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.translate(0, -this.branchLength);
    ctx.lineTo(0, 0);
    ctx.stroke();

    if(this.gen <= this.genNum){       //判斷當前的節點代數是否大于設置的節點數
        this.branch(ctx, this.angle);   //畫右邊樹枝
        this.branch(ctx, -this.angle);  //畫左側樹枝
    }
    ctx.restore();

    this.gen--;
}

二叉樹的造型已經與我們現實中的樹木結構有相似之處了。下一步我們就通過這種繪制二叉樹的方法來實現自然樹。

3.自然樹

自然樹的原理與二叉樹的原理完全一樣，不同之處在于對樹枝的分叉設置了更多的隨機性。也就是說，不會像我們上面看到的一樣，樹枝的分叉那么有對稱性。并且，在樹枝的末端繪制樹葉。ok,下面展示一下用canvas繪制的藝術品。

怎么樣，帥氣吧！是不是跟真的樹一模一樣。代碼有點長，我在這就不列出來了，具體代碼請查看binaryTree.js。如果你想體驗不同的繪制效果請查看natureTree.html。在這個文件中，你可以對一些主要的參數進行控制來實現不同的繪制效果。

無限森林的效果，就是使用屏幕環繞的原理。當物體的z軸坐標超過設定的位置就回到初始位置。下面我們看看效果圖。為了讓動畫的效果更流暢，我們采用第一種簡單樹來做，請各位看官原諒我的渣電腦實在是太老舊了。

如果你的電腦配置不錯，可以換成其他兩種樹試試。效果一定更好哦！核心代碼如下：

...
function move (tree) {
        tree.xpos += vx;
        tree.ypos += vy;
        tree.zpos += vz;
          
        if(tree.ypos < floor){  //讓樹的Y軸坐標落在設置好的地面上
            tree.ypos = floor;
        }
        
        if (tree.zpos < -fl) {  //如果z坐標超出了屏幕回到一個老遠的位置
          tree.zpos += 10000;
        }
        if (tree.zpos > 10000 - fl) {  //如果z軸的坐標超過了我們設置的距離，
                                         讓它回到一個近的位置
          tree.zpos -= 10000;
        }
                                        //3維環境設置
        var scale = fl / (fl + tree.zpos);
        tree.scaleX = tree.scaleY = scale;
        tree.x = vpX + tree.xpos * scale;
        tree.y = vpY + tree.ypos * scale;
        tree.alpha = scale;
      }
...

森林的運動通過鍵盤的方向鍵來控制。具體代碼請查看tree-2.html。

星海使用的還是我們的球類文件，不同之處在于球體的著色上使用的是canvas的放射漸變來形成光暈效果。具體代碼請看ball3d-s.js

...
var gradient = context.createRadialGradient(0, 0, 0, 0, 0, this.radius );
    gradient.addColorStop(0,"rgba(255,255,255,1)");
    gradient.addColorStop(0.2,"rgba(0,255,255,1)");
    gradient.addColorStop(0.3,"rgba(0,0,100,1)");
    gradient.addColorStop(1,"rgba(0,0,0,0.1)");
    context.fillStyle = gradient;
...

效果圖如下：

默認情況下，小球是有一個豎直向上的速度，通過方向鍵來控制作用于球體上的加速度，以此來達到物體運動的效果。代碼基本上沒有變化，在這我就不列舉了。詳細代碼請查看star.html

本節的內容到這就結束了，下一節，我們介紹3維環境下的旋轉與碰撞。