核心JS
链接: simplex-noise.js
效果截图
预览链接： https://codepen.io/thj2/pen/zYoOjzd
控制属性
this.count = 80; //波浪个数
This.speedY += 0.01; //波浪抖动频率
var amp = 100; //波浪幅度（高度）
This.draw(‘rgba(239,119,87,0.35)’,-100); //颜色，透明度， 位置
全部代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;padding: 0;}
body,html{
width: 100%;height: 100%; overflow: hidden; }
canvas{
background:#e6e6e6; transform: rotate(180deg);}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/simplex-noise/2.3.0/simplex-noise.min.js"></script>
<script type="text/javascript">
class Wave{
constructor(){
this.canvas = document.getElementById('canvas');
this.ctx = this.canvas.getContext('2d');
this.simplex = new SimplexNoise();
this.speedY = 0;
this.speedX = 0;
this.init();
}
init(){
this.reset();
this.loop();
}
reset(){
this.w = window.innerWidth;
this.h = window.innerHeight;
this.canvas.width = this.w;
this.canvas.height = this.h;
// this.count = Math.ceil(this.w / Math.floor(Math.random()*40 + 40));
this.count = 80;
}
loop(){
var This = this;
function drawloop(){
window.requestAnimationFrame(drawloop);
This.ctx.clearRect(0,0,This.w,This.h);
This.speedX = 0;
// This.speedY += 0.001; //每次渲染需要更新波峰波谷值
This.speedY += 0.01; //每次渲染需要更新波峰波谷值
//连续绘制三次波浪线
This.draw('rgba(239,119,87,0.35)','screen',-100);
This.draw('rgba(239,119,87,0.3)','screen',20);
This.draw('rgba(239,119,87,0.2)','screen',60);
This.draw('rgba(239,119,87,0.15)','screen',100);
This.draw('rgba(239,119,87,0.1)','screen',140);
}
drawloop();
}
draw(color,index){
var amp = 100; //波浪幅度 可以通过函数传递参数更改不同的幅度
this.ctx.beginPath();
for(var i=0;i<=this.count;i++){
this.speedX += 0.05;
var x = i*(this.w/this.count);
var y = this.h/3.5 + this.simplex.noise2D(this.speedX,this.speedY)*amp + index;
this.ctx[i === 0 ? 'moveTo' : 'lineTo'](x,y);
console.log(this.simplex.noise2D(this.speedX,this.speedY)*100)
}
this.ctx.lineTo(this.w,-this.h);
this.ctx.lineTo(0, -this.h);
this.ctx.closePath();
this.ctx.fillStyle = color;
this.ctx.fill();
}
}
new Wave();
</script>
</body>
</html>
参考
参考文章：https://damiao.blog.csdn.net/article/details/80976863?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.control