canvas中的曲线运动

一 ：曲线运动

   实现曲线运动的方法目前了解到两种：一种是三角函数，另一种是贝塞尔曲线，在这里我就介绍下如何用三角函数实现曲线运动。

三角函数相信大家在高中都有接触过，比如 正弦、余弦、正切等。这里我就简单介绍下正弦函数的运动轨迹。

 正弦函数图像

QQ截图20160826192452.jpg

如图所示的正弦函数就是一种曲线运动，那么如何能让一个物体能实现这种运动呢？

一：从图中可看出X轴代表的是弧度，Y轴代表的sin(弧度)；

   那么弧度与角度是如何换算的？
      2π=360°；
     1°=2π/360°=π/180°；
     1弧度=180°/π；

二: 创建一个Div做为做曲线运动的对象

三：用js去控制这个Div的left值和top值

曲线运动效果示意图

move.gif

四：如何让多物体做曲线运动

```

```

效果示意图

canvas.gif