1.正圆运动

上图展示了从圆的函数表达式到圆的极坐标表达式之间的转换过程。理解不理解都没有关系，总之你要明白，最终我们将 x, y 与 sin 和 cos 扯上关系了。而圆的极坐标表达式就表示的是一个圆。这样我们想要让一个物体做圆周运动，那不就so easy了吗？具体代码如下：

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 和 R，在后面的章节中我们将介绍如何只通过 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;(function drawFrame(){window.requestAnimationFrame(drawFrame,canvas);context.clearRect(0,0,canvas.width,canvas.height); //当radius的值相等时为圆周运动//当radius的值不想等是为椭圆运动ball.x = centerX + Math.sin(angle)*radiusX; //radiusX = 50ball.y = centerY + Math.cos(angle)*radiusY; //radiusY = 100angle += speed; ball.draw(context); })();}

哎！好累！！！

三、两点之间的距离

按理来说，连点之间的距离是不会用到三角函数的。但是，其实两点间的距离公式是可以通过勾股定理推出来的，所以这里直接就把他归到三角函数里。
这里就不画示意图了直接给你个公式好了(原谅我偷个懒)，假设有两个点, a(x1, y1), b(x2, y2)。那么怎样求它们之间的距离呢！公式如下：

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

这里给你个小的Demo,代码如下：

<canvas>your browser not support canvas!</canvas><p></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);

写完这篇，我已泣血而亡，各位小主麻烦点个赞吧！！！

更多相关文章

[Canvas动画系列]之流弊黑客帝国

Ladies and 基佬们 今天我们来讲讲canvas动画. 从哪里开始呢,曾经儿时中印象特别深的就是黑客帝国了(别问我多大! 先发个链接,看的懂看过的的大牛这页可以关了,出门右拐是甘其食包子. 首先先聊聊这东西大概怎么实现的吧,如果不知道canvas动画是怎么实现的话,那请戳 其实很早的时候我不懂canvas动画怎么实现..一直很困惑,后来才知道有clearRect这么流弊的方法,虽然感觉这个 ...

[Canvas动画系列]之聊聊缓动

熟悉jq动画的童鞋肯定知道easing这个插件(不知道的拖出去喂包子 看过源码的都知道插件里面其实都是一堆算法函数. 曾经有个人面试我问我某一个动画是怎么实现的.我擦,我怎么知道. 前几天心血来潮,看了一下easing的源码,想了半天怎么扒出来(大牛请出门右拐),里面4个参数不明所以,阿西吧.不过还是慢慢研究出来了. 戳戳戳 其实我要讲的就一个函数,缓动算法怎么来的?我tm也想知道! // t: ...

HTML5实例教程--创意画板

• 共4页:
• 上一页
• 1
• 2
• 3
• 4
• 下一页