![68babd570b7aeccacaf92df114bac681.png](https://i-blog.csdnimg.cn/blog_migrate/d7e6a0c58462a616bc4c4827378ba101.jpeg)
看到这个标题,想必大家都有兴趣的,今天给大家分享一个不正经的输入框。废话少说,先上效果
![b0f78a25fa71d01a92e9fcdf27f60324.gif](https://i-blog.csdnimg.cn/blog_migrate/7700ca919247d083e7537cd8c044b69a.gif)
![9f0e396a287a6726f2d16fa9729bdd8e.png](https://i-blog.csdnimg.cn/blog_migrate/9ab03ecd1a84a1ff7fa43b50820f0c7e.jpeg)
代码奉上:
骚气的input
请输入内容...
不得不说,html5 canvas太棒了,给了前端充分的想像,结合数学,给我们意想不到的惊喜。 运用canvas最基础的API,简单的三角函数,可视化数学之美。
下面进行技术总结:
- 通过正弦曲线生成N个点,然后通过context.lintTo把所有的点连接起来,形成一个正弦曲线,我们都知道,正弦曲线表达式为:y = sin(x); 主的取值为[-1,1],如果我们在sin前面*一个系数,比如:y=4*sin(x);则表示增大波峰。即上下摆动的幅度增加了4倍。
- canavs动画的基本原理:画了擦,擦了再画。
- 不要给canvas设置width,height的样式,要用JS 动态设置,用CSS设置的在绘制一些基本图形的时候可能会变形,大家不妨可以试试。