基于mfc的图形学实例_前端图形学（六）——Canvas展现数学之美

点击右上角的关注，不定期前端干货分享！！

欢迎来到我的前端图形学系列文章：

前端图形学基础(一)——Canvas基础入门

前端图形学基础(二)——Canvas基础

前端图形学基础(三)——Canvas绘制图片

前端图形学基础(四)——Canvas绘制曲线

前端图形学基础(五)——Canvas状态管理

在职场征战多年的你，是否还依稀记得高中数学的知识呢？看到上方的图，是否能勾起你的回忆呢？可能有人会说，你一个做前端的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 的值，就能实现曲线运动起来了。我们让两条曲线对应不同的速度，形成视觉差。最终的效果就出来啦~~

总结

高中的数学只是理论，而前端图形学就是要将这些理论应用到我们的图形界面中，让数学之美得以完美体现。

这里是【畅哥聊技术】前端图形学相关技术文章，更多精彩内容敬请关注，下一篇我将带来基于此示例延伸出更深入的实例。未完待续。。。