点击右上角的关注，不定期前端干货分享！！
欢迎来到我的前端图形学系列文章：
在职场征战多年的你，是否还依稀记得高中数学的知识呢？看到上方的图，是否能勾起你的回忆呢？可能有人会说，你一个做前端的DS，扯高中数学做什么呢？这和我们前端有什么关系呢？
那么可以很负责任的告诉大家，高中的数学、物理在前端图形学中的应用的地位绝对的举足轻重。没有相关的知识的支撑，可以说图形学寸步难行~
不信我们接着往下看吧~~
先来看我们今天要实现的第一个效果吧：
看到这张git图，是否有脸蒙蔽？其实这就是利用canvas + 三角函数实现的效果。
前面的canvas图形学基础中我有介绍到通过lineTo去实现一个正弦曲线示意图。我们大致回顾一下高中的三角函数的基础知识
三角函数（正余弦曲线）
至于为什么是这样的两条曲线，我前面的文章 前端图形学基础（二）——Canvas基础中有介绍。
1、正弦曲线：
y = k * sin(c * x + a ) + b ;
2、余弦曲线
y = k * cos( c * x + a ) + b ;
解释一下几个参数的意义，我们都知道，正余弦函数y的聚会范围是 [ 0 , 1 ]，所以：
1、k 表示的整体y的大小，那么从上图中可以知道，y 值的变化就是对应曲线的波峰。
2、c 表示的是曲线的周期大小。
3、a 表示曲线的水平方向的平移（左加右减）
4、b 表示的曲线的垂直方向的平移（上加下減）
好了，有了上面的基础，我们可以来分析一下我们要实现的效果了。
我们看到有两条曲线，由不同的速度从左往右运动，从而形成了视觉差。两条曲线对应的刚好就是正余弦曲线。
废话少说，我们直接上代码：
（需要源代码的可私信我）
两条曲线的绘制过程很相似，我这就没有去单独的封装成方法了。
先可以简单的绘制静态的正弦曲线。然后将曲线的终点lineTo到画布的右下角(width,height)，再移动到左下角(0,height)，最后再closePath()形成闭环。
分解一下这个过程：
首先绘制一个正弦曲线：
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var {width,height} = canvas;
context.save();
context.translate(0,height/10);
context.beginPath();
for(var i = 0; i< width;i++){
var x = i;
var y = 8* Math.sin( x * Math.PI / 180 + (i / 200));
context[i === 0 ? 'moveTo':'lineTo'](x,y);
}
context.lineTo(width,height);
context.lineTo(0,height);
context.closePath();
context.fillStyle = 'rgba(156,10,217,1)';
context.fill()
context.restore();
值得注意的是，这里使用到了我上一篇文章中所讲到的canvas的状态管理的应用。context.save()和context.restore();以及开始一段路径的方法。效果如下：
然后相同的方法我们也可以绘制出对应的余弦曲线了吧，两个效果叠加到一起效果如下:
然后该让两条曲线扭动起来了。
前面说到了：y = k * sin(c * x + a ) + b ; 中我们只需要不停的改变 a 的值，就能实现曲线运动起来了。我们让两条曲线对应不同的速度，形成视觉差。最终的效果就出来啦~~
总结
高中的数学只是理论，而前端图形学就是要将这些理论应用到我们的图形界面中，让数学之美得以完美体现。
这里是【畅哥聊技术】前端图形学相关技术文章，更多精彩内容敬请关注，下一篇我将带来基于此示例延伸出更深入的实例。未完待续。。。