canvas動畫包教不包會：三角函數(shù)（2）

1. 波形（平滑的上下運(yùn)動、線性運(yùn)動、脈沖運(yùn)動）
2. 圓周運(yùn)動與橢圓運(yùn)動
3. 兩點(diǎn)間的距離（勾股定律）

for(var angle = 0; angle < Math.PI*2; angle += 0.1){
  console.log(Math.sin(angle));
}

ball.x += 1;   
ball.y += Math.sin(ball.angle) * 10;   
ball.angle += 0.1;

ball.angle += 0.1;

ball.scale = 1 + Math.sin(ball.angle);   
ball.angle += 0.1;   
ball.radius = 10 * ball.scale;

sin(θ) = x1 / R   =>   x1 = R * sin(θ)
cos(θ) = y1 / R   =>   y1 = R * cos(θ)

ball.x =  centerX + Math.sin(ball.angle)*radius;   
ball.y =  centerY + Math.cos(ball.angle)*radius;

（2）橢圓運(yùn)動

我們將橢圓的長軸和短軸分別設(shè)為2a和2b。

表達(dá)式：

x2 = a * cosθ
y2 = b * sinθ

橢圓和正圓的唯一區(qū)別就是，正圓上任何一個點(diǎn)到圓心的距離都是一樣的，而橢圓卻不一樣。

與正圓運(yùn)動不一樣的是，橢圓運(yùn)動是根據(jù)兩個半徑值來計算的（radiusX為100，radiusY為50）：

ball.x =  centerX + Math.sin(ball.angle)*radiusX;   
ball.y =  centerY + Math.cos(ball.angle)*radiusY;

3、兩點(diǎn)間的距離（勾股定律）

很多時候，我們需要知道兩個物體間的距離（對于后面的碰撞檢測很重要），這時我們又要用到數(shù)學(xué)了，那就是勾股定律（要知道詳情，請百度）。

假設(shè)有點(diǎn)A(x1,y1)和點(diǎn)B(x2,y2)，要求它們的距離很簡單：

var dx = x2 - x1;
var dy = y2 - y1;
var dist = Math.sqrt(dx * dx + dy * dy);

dist就是兩點(diǎn)間的距離了。其實(shí)在上面我們用到了很多，比如圓的半徑，就是這樣計算來的，只不過它有一個特殊點(diǎn)（原點(diǎn)(0,0)），就相等于 x1 = 0, y1 = 0 。

總結(jié)

到這里，關(guān)于三角函數(shù)的內(nèi)容已經(jīng)講完了，雖然不能包含全部，但是利用這些，你能弄出很多效果（前提是你去思考）。

這兩章需要各位慢慢去看，爭取多動手吧！

如有錯誤，歡迎指正！

附錄：

（1）角度與弧度互轉(zhuǎn)

radians = degrees * Math.PI /180
degrees = radians * 180 / Math.PI

（2）旋轉(zhuǎn)（弧度）

dx = point.x - object.x;
dy = point.y - object.y;
boject.rotation = Math.atan2(dy, dx);

（3）平滑運(yùn)動

value = center + Math.sin(angle) * range;
angle += speed;

（4）圓形運(yùn)動

xposition = centerX + Math.cos(angle) * radius;
yposition = centerY + Math.sin(angle) * radius;
angle += speed;

（5）橢圓運(yùn)動

xposition = centerX + Math.cos(angle) * radiusX;
yposition = centerY + Math.sin(angle) * radiusY;
angle += speed;

（6）兩點(diǎn)間的距離

var dx = x2 - x1;
var dy = y2 - y1;
var dist = Math.sqrt(dx * dx + dy * dy);