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

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

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

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

上圖展示了從圓的函數(shù)表達(dá)式到圓的參數(shù)方程之間的轉(zhuǎn)換過(guò)程。理解不理解都沒(méi)有關(guān)系，總之你要明白，最終我們將 x, y 與 sin 和 cos 扯上關(guān)系了。而圓的參數(shù)方程就表示的是一個(gè)圓。這樣我們想要讓一個(gè)物體做圓周運(yùn)動(dòng)，就只需要讓計(jì)算機(jī)自己去來(lái)計(jì)算每一幀物體所對(duì)應(yīng)的坐標(biāo)值。而我們所需要做的只是簡(jiǎn)單的改變θ值。有多簡(jiǎn)單呢，因?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 的作用是讓球繞畫(huà)布中心旋轉(zhuǎn)
                   ball.x = centerX + Math.sin(angle)*radius;
                   ball.y = centerY + Math.cos(angle)*radius;

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

效果圖

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

橢圓和正圓的不同之處可以這樣理解：正圓半徑在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)
                //當(dāng)radius的值不想等是為橢圓運(yùn)動(dòng)
                ball.x = centerX + Math.sin(angle)*radiusX; //radiusX = 50
                ball.y = centerY + Math.cos(angle)*radiusY; //radiusY = 100
                angle += speed;
                
                ball.draw(context);
            })();
        }

為了讓橢圓的效果看起來(lái)更加明顯，代替clearRect采用fillRect是小球的運(yùn)動(dòng)形成尾跡。

按理來(lái)說(shuō)，連點(diǎn)之間的距離是不會(huì)用到三角函數(shù)的。但是，其實(shí)兩點(diǎn)間的距離公式是可以通過(guò)勾股定理推出來(lái)的，所以這里直接就把他歸到三角函數(shù)里。
這里就不畫(huà)示意圖了直接給你個(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)動(dòng)
       value = center + Math.sin(angle)*range;
       angle += speed;

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

    ## 橢圓運(yùn)動(dòng)
       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);