js input多个class取值_骚气的input

看到这个标题，想必大家都有兴趣的，今天给大家分享一个不正经的输入框。废话少说，先上效果

代码奉上：

 骚气的input

不得不说，html5 canvas太棒了，给了前端充分的想像，结合数学，给我们意想不到的惊喜。 运用canvas最基础的API,简单的三角函数，可视化数学之美。

下面进行技术总结：

1. 通过正弦曲线生成N个点，然后通过context.lintTo把所有的点连接起来，形成一个正弦曲线，我们都知道，正弦曲线表达式为：y = sin(x); 主的取值为[-1,1]，如果我们在sin前面*一个系数，比如：y=4*sin(x);则表示增大波峰。即上下摆动的幅度增加了4倍。
2. canavs动画的基本原理：画了擦，擦了再画。
3. 不要给canvas设置width,height的样式，要用JS 动态设置，用CSS设置的在绘制一些基本图形的时候可能会变形，大家不妨可以试试。