摘要：接每周一點動畫波形運動圓周運動可以分為兩種基本的形式正圓運動和橢圓運動。上圖展示了從圓的函數表達式到圓的參數方程之間的轉換過程。而圓的參數方程就表示的是一個圓。三兩點之間的距離按理來說，連點之間的距離是不會用到三角函數的。

接《每周一點canvas動畫》——波形運動

圓周運動可以分為兩種基本的形式：正圓運動和橢圓運動。
在講解圓周運動之前，必不可少的數學公式即將襲來。so,各位騷年們，請護好自己的膝蓋。聽不懂沒關系，只要明白其中的原理就行。當然，能懂是最好的，這對后面學習高級動畫是很有幫助的。好吧，廢話少說直接上菜。

一般情況下，圓的直角坐標方程可以表示為：x2+y2=R2，根據此公式可以得出圓在直角坐標中的軌跡。也許，你會說這樣就可以通過改變x,y的坐標位置讓物體做圓周運動。但是，實際情況是這種方法并不可行。因為，你無法精確的計算出物體做圓周運動的每一個坐標位置。就算你成功計算出物體做圓周運動的精確坐標。OK!你可以想象那是多么大的工作量。所以，我們需要轉變思路，讓計算機去做這種精確的計算問題。

上圖展示了從圓的函數表達式到圓的參數方程之間的轉換過程。理解不理解都沒有關系，總之你要明白，最終我們將 x, y 與 sin 和 cos 扯上關系了。而圓的參數方程就表示的是一個圓。這樣我們想要讓一個物體做圓周運動，就只需要讓計算機自己去來計算每一幀物體所對應的坐標值。而我們所需要做的只是簡單的改變θ值。有多簡單呢，因為根據sin，cos函數的周期性只需要每一幀自增一個值或自減一個值。具體代碼如下：

    window.onload = function(){
               var canvas = document.getElementById("canvas"),
                   context = canvas.getContext("2d");

               var ball = new Ball();

               var angle = 0, // 旋轉的角度
                   centerX = canvas.width/2,
                   centerY = canvas.height/2,
                   radius = 100, // 定義半徑
                   speed = 0.05; // 每幀旋轉角度的增加值

               (function drawFrame(){
                   window.requestAnimationFrame(drawFrame, canvas);
                   context.clearRect(0,0,canvas.width, canvas.height);

                   //centerX, centerY 的作用是讓球繞畫布中心旋轉
                   ball.x = centerX + Math.sin(angle)*radius;
                   ball.y = centerY + Math.cos(angle)*radius;

                   //角度增加
                   angle += speed;
                   ball.draw(context);
               }());
           }

效果圖

ok,自己動手試試吧！看看是不是球體繞著畫布中心做著圓周運動呢！這里我們需要的條件比較多 angle 和 Radius，在后面的章節中我們將介紹如何只通過 angle 就實現圓周運動。為了更容易理解，我勸你最好復習一下中學的知識，哈哈！！！

橢圓和正圓的不同之處可以這樣理解：正圓半徑在x軸和y軸上的距離是相同的，都是Radius.而橢圓則是不同的,我們用a, b 表示。

具體到代碼里，就是半徑不同了唄！是不是so easy,上代碼：

window.onload = function(){
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            var ball = new Ball();
            
            var centerX = canvas.width/2,
                centerY = canvas.height/2,
                angle = 0,
                radiusX = 50,
                radiusY = 100,
                speed = 0.05;
            
                ball.x = centerX;
                ball.y = centerY;
                
             context.fillStyle = "rgba(0,0,0,.01)"; 
            (function drawFrame(){
                window.requestAnimationFrame(drawFrame,canvas);
                context.fillRect(0,0,canvas.width,canvas.height);
                
                //當radius的值相等時為圓周運動
                //當radius的值不想等是為橢圓運動
                ball.x = centerX + Math.sin(angle)*radiusX; //radiusX = 50
                ball.y = centerY + Math.cos(angle)*radiusY; //radiusY = 100
                angle += speed;
                
                ball.draw(context);
            })();
        }

為了讓橢圓的效果看起來更加明顯，代替clearRect采用fillRect是小球的運動形成尾跡。

按理來說，連點之間的距離是不會用到三角函數的。但是，其實兩點間的距離公式是可以通過勾股定理推出來的，所以這里直接就把他歸到三角函數里。
這里就不畫示意圖了直接給你個公式好了(原諒我偷個懶)，假設有兩個點, a(x1, y1), b(x2, y2)。那么怎樣求它們之間的距離呢！公式如下：

    dx = x2 - x1;
    dy = y2 - y1;
    distance = Math.sqrt(dx*dx + dy*dy); //這不就是勾股定理

這里給你個小的Demo,代碼如下：

    
           your browser not support canvas!
       
       

       
       

效果圖

    ## 角度旋轉
    dx = mouse.x - object.x;
    dy = mouse.y - object.y;
    object.rotation = Math.atan2(dy,dx)*180/Math.PI

    ## 平滑運動
       value = center + Math.sin(angle)*range;
       angle += speed;

    ## 正圓運動
       x_position = centerX + Math.sin(angle)*radius;
       y_position = centerY + Math.cos(angle)*radius;
       angle += speed;

    ## 橢圓運動
       x_position = centerX + Math.cos(angle)*radiusX;
       y_position = centerY + Math.sin(angle)*radiusY;
       angle += speed;

    ##兩點間距離
    dx = x2 - x1;
    dy = y2 - y1;
    dist = Math.sqrt(dx*dx + dy*dy);