HTML5 Canvas

动画中的数学1(三角函数,H5 canvas示例)

2017-03-29  本文已影响48人  Stranger_alone

首先,我们来介绍一下基本知识:

三角函数

相信大家对sin,cos并不是很陌生吧。毕竟,折磨了我们好几年的数学哈哈哈。需要更多的知识请参考百度百科。

回归正题,我们来玩我们的动画。

我们知道sin(x) 函数有最大值以及最小值。如果不清楚可以借助工具绘图。这边提供一个工具(跟本人无关)。

http://www.fooplot.com/ 这是一个线上绘图工具。

那我们先来画一个sin的图像。

y = sin(x)

可知,其实sin函数在最大值最小值之前循环。即使x不断增大。函数还在在1到-1之间。

由此我们可以构造一个动画。

画圆在X轴上循环运动

代码上面贴出来。这段代码运行出来可以让小球在X轴上左右运动。一直循环。出了sin,不是还有cos吗?

更多的各位去延展了。

上一篇 下一篇

猜你喜欢

热点阅读