点击右上角的关注,不定期前端干货分享!!
欢迎来到我的前端图形学系列文章:
前端图形学基础(一)——Canvas基础入门
前端图形学基础(二)——Canvas基础
前端图形学基础(三)——Canvas绘制图片
前端图形学基础(四)——Canvas绘制曲线
前端图形学基础(五)——Canvas状态管理
![1c335d4ba8941b0b042890b380a57d76.png](https://i-blog.csdnimg.cn/blog_migrate/b39f5e1e579cb342dc0605699cbafb06.jpeg)
在职场征战多年的你,是否还依稀记得高中数学的知识呢?看到上方的图,是否能勾起你的回忆呢?可能有人会说,你一个做前端的DS,扯高中数学做什么呢?这和我们前端有什么关系呢?
那么可以很负责任的告诉大家,高中的数学、物理在前端图形学中的应用的地位绝对的举足轻重。没有相关的知识的支撑,可以说图形学寸步难行~
不信我们接着往下看吧~~
先来看我们今天要实现的第一个效果吧:
![1d608ee2909032be15b7d661af30552f.gif](https://i-blog.csdnimg.cn/blog_migrate/bd7cdc9252365ad62a90afc3bbed616f.gif)
你看波浪,浪不浪?
看到这张git图,是否有脸蒙蔽?其实这就是利用canvas + 三角函数实现的效果。
前面的canvas图形学基础中我有介绍到通过lineTo去实现一个正弦曲线示意图。我们大致回顾一下高中的三角函数的基础知识
三角函数(正余弦曲线)
![430198c5950c134f139aa170d035194c.png](https://i-blog.csdnimg.cn/blog_migrate/5db35268a2bec48d45f910c34c0649a7.jpeg)
正余弦曲线示意图
至于为什么是这样的两条曲线,我前面的文章 前端图形学基础(二)——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 表示的曲线的垂直方向的平移(上加下減)
好了,有了上面的基础,我们可以来分析一下我们要实现的效果了。
我们看到有两条曲线,由不同的速度从左往右运动,从而形成了视觉差。两条曲线对应的刚好就是正余弦曲线。
废话少说,我们直接上代码:
![72f6c0f4ecbdd2c205a0dfb82ae37deb.png](https://i-blog.csdnimg.cn/blog_migrate/c8a1362acbf3da3126fe7bd008d46c9c.jpeg)
因为头条的代码编辑器不太友好,所以我这就直接贴图了
(需要源代码的可私信我)
两条曲线的绘制过程很相似,我这就没有去单独的封装成方法了。
先可以简单的绘制静态的正弦曲线。然后将曲线的终点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();以及开始一段路径的方法。效果如下:
![6530239bd0f766262fc6fb1d3e867413.png](https://i-blog.csdnimg.cn/blog_migrate/1597207ab10f83b5ab81112fbd75eb85.jpeg)
正弦曲线
然后相同的方法我们也可以绘制出对应的余弦曲线了吧,两个效果叠加到一起效果如下:
![cc6a7c6413e615c74165c9ec683ac7e8.png](https://i-blog.csdnimg.cn/blog_migrate/db3db81d614fa477d8072086f9cf7ebb.jpeg)
两条曲线叠加在一起
然后该让两条曲线扭动起来了。
前面说到了:y = k * sin(c * x + a ) + b ; 中我们只需要不停的改变 a 的值,就能实现曲线运动起来了。我们让两条曲线对应不同的速度,形成视觉差。最终的效果就出来啦~~
总结
高中的数学只是理论,而前端图形学就是要将这些理论应用到我们的图形界面中,让数学之美得以完美体现。
这里是【畅哥聊技术】前端图形学相关技术文章,更多精彩内容敬请关注,下一篇我将带来基于此示例延伸出更深入的实例。未完待续。。。