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

接《每周一點(diǎn)canvas動畫》——波形運(yùn)動

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

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

上圖展示了從圓的函數(shù)表達(dá)式到圓的參數(shù)方程之間的轉(zhuǎn)換過程。理解不理解都沒有關(guān)系，總之你要明白，最終我們將 x, y 與 sin 和 cos 扯上關(guān)系了。而圓的參數(shù)方程就表示的是一個(gè)圓。這樣我們想要讓一個(gè)物體做圓周運(yùn)動，就只需要讓計(jì)算機(jī)自己去來計(jì)算每一幀物體所對應(yīng)的坐標(biāo)值。而我們所需要做的只是簡單的改變θ值。有多簡單呢，因?yàn)楦鶕?jù)sin，cos函數(shù)的周期性只需要每一幀自增一個(gè)值或自減一個(gè)值。具體代碼如下：

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

               var ball = new Ball();

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

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

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

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

效果圖

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

橢圓和正圓的不同之處可以這樣理解：正圓半徑在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);
                
                //當(dāng)radius的值相等時(shí)為圓周運(yùn)動
                //當(dāng)radius的值不想等是為橢圓運(yùn)動
                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是小球的運(yùn)動形成尾跡。

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

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

這里給你個(gè)小的Demo,代碼如下：

    
           your browser not support canvas!
       
       

       
       

效果圖

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

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

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

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

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