接《每周一点canvas动画》——波形活动
圆周活动能够分为两种基础的情势：正圆活动和椭圆活动。
在解说圆周活动之前，必不可少的数学公式行将袭来。so,列位骚年们，请护好本身的膝盖。听不懂没紧要，只需邃晓个中的道理就行。固然，能懂是最好的，这对背面进修高等动画是很有协助的。好吧，废话少说直接上菜。
1.正圆活动
平常情况下，圆的直角坐标方程能够示意为：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 就完成圆周活动。为了更轻易明白，我劝你最好温习一下中学的学问，哈哈！！！
2.椭圆活动
椭圆和正圆的差别之处能够如许明白：正圆半径在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,代码以下：
<canvas id="canvas" width="500" height="500" style="background:#000;">
your browser not support canvas!
</canvas>
<p id="log"></p>
<script src="../js/utils.js"></script>
<script>
window.onload = function(){
var canvas = document.getElementById('canvas');
var log = document.getElementById('log');
var mouse = utils.captureMouse(canvas);
var context = canvas.getContext('2d');
//中间位置建立一个方块
var rect = {
x:canvas.width/2,
y:canvas.height/2
};
(function drawFrame(){
window.requestAnimationFrame(drawFrame,canvas);
context.clearRect(0,0,canvas.width,canvas.height);
var dx = mouse.x - rect.x;
var dy = mouse.y - rect.y;
var dis = Math.sqrt(dx*dx + dy*dy);
//画方块
context.fillStyle = '#ffffff';
context.fillRect(rect.x-2,rect.y-2,4,4);
//画线
context.save();
context.strokeStyle = '#ffffff';
context.beginPath()
context.moveTo(rect.x,rect.y);
context.lineTo(mouse.x,mouse.y);
context.closePath();
context.stroke();
context.restore();
//显现间隔
log.style.left = (mouse.x + rect.x)/2 + 'px';
log.style.top = (mouse.y + rect.y)/2 + 'px';
log.innerHTML = dis;
})();
}
</script>结果图
四、总结
## 角度扭转
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);
