Canvas制作水波图实现原理，web前端开发教学视频

实现思路

了解了正弦曲线的一些属性，我们可以把这些属性来控制波浪，

• 振幅：控制波浪的高度

• 周期：控制波浪的宽度

• 相移：控制波浪的水平移动

• 垂直位移：控制水位的高度

动画效果的实现主要是利用相移，通过不断水平移动曲线，产出波浪移动的感觉，然后可以绘制多条曲线，曲线之间通过控制属性（高度、宽度、移动速度），产生视觉差，就会有波浪起伏的感觉了。有了这些思路，我们来慢慢实现。

曲线绘制

初始化，定义 Canvas 的宽高：

componentDidMount() {

const self = this;

const canvas = this.refs.canvas;

canvas.height = 500;

canvas.width = 500;

this.canvas = canvas;

this.canvasWidth = canvas.width;

this.canvasHeight = canvas.height;

const ctx = canvas.getContext(‘2d’);

this.drawSin(ctx);

}

render() {

return (

);

}

根据定义波浪的参数配置，通过公式：y = 波浪高度 * sin(x * 波浪宽度 + 水平位移)，来绘制正弦曲线：

drawSin(ctx) {

const points = [];

const canvasWidth = this.canvasWidth;

const canvasHeight = this.canvasHeight;

const startX = 0;

const waveWidth = 0.05; // 波浪宽度,数越小越宽

const waveHeight = 20; // 波浪高度,数越大越高

const xOffset = 0; // 水平位移

ctx.beginPath();

for (let x = star