1. 核心工具:simplex-noise.min.js
2. 工具介绍:
(1)动态生成可改变可移动的噪波数据
(2)文档地址: https://www.bootcdn.cn/simplex-noise/readme/
3. 最终渲染演示:
4. Canvas核心过程演示:
(1)单次绘制:
draw(color,comp){
var amp = 25; //波浪幅度 可以通过函数传递参数更改不同的幅度
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/2 + this.simplex.noise2D(this.speedX,this.speedY)*amp;
this.ctx[i === 0 ? 'moveTo' : 'lineTo'](x,y);
}
this.ctx.lineTo(this.w,-this.h);
this.ctx.lineTo(0, -this.h);
this.ctx.closePath();
this.ctx.fillStyle = color;
this.ctx.globalCompositeOperation = comp;
this.ctx.fill();
}
(2)定时器循环绘制:
loop(){
var This = this;
function drawloop(){
window.requestAnimationFrame(drawloop);
This.ctx.clearRect(0,0,This.w,This.h);
This.speedX = 0;
This.speedY += 0.01; //每次渲染需要更新波峰波谷值
//连续绘制三次波浪线
This.draw('red','screen');
This.draw('green','screen');
This.draw('blue','screen');
}
drawloop();
}
5. 噪波插件单次渲染的数据可视化展示:
6. 全部源码:
https://github.com/RiversCoder/canvas/blob/master/7_canvas_waves/wave.html