https://codepen.io/goodkatz/pen/LYPGxQz <!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="UTF-8"> <title>canvas 波浪线</title> <style type="text/css"> body{margin: 0;padding: 0;background: #333;} #waves{margin-top:300px;} </style> </head> <body> <canvas id="waves"></canvas> </body> <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="http://img.momen.vip/plug-in/sine-waves.js"></script> <script type="text/javascript"> // $(function(){ // $(function(){ new SineWaves({ el: document.getElementById("waves"), speed: 2, width: function() { return $("body").width() }, height: 100, ease: "SineInOut", wavesWidth: "120%", waves: [{ timeModifier: 2, lineWidth: 1, amplitude: 30, wavelength: 100 }, { timeModifier: 3, lineWidth: 1, amplitude: -30, wavelength: 100 }], resizeEvent: function() { var e = this.ctx.createLinearGradient(0, 0, this.width, 0); e.addColorStop(1, "rgba(255, 255, 255, 0.2)"); for(var t = -1, n = this.waves.length; ++t < n;) this.waves[t].strokeStyle = e; t = void 0, n = void 0, e = void 0 } }) }) </script> } </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » canvas 波浪线 喜欢 (1)or分享 (0)
