Используйте холст, чтобы нарисовать водные волны в стиле дриблинга

Сначала поместите простую диаграмму эффектов

портал

😔 Принцип

Функция sin оценивается как знакомая всем, а используемая формулаamplitude * sin(frequency * x) + displacement

Мы можем управлять анимацией кривой, изменяя амплитуду и частоту функции.

😈 начало

определитьWaveДобрый

```

class Wave {

constructor(color) {

this.t = 0;

this.step = w / 300;

this.color = color;

this.speed = 0.1;

this.a = 30;

this.f = 20;

this.d = 20;

}

caculate(x) {

this.amplitude = this.a;

this.frequency = this.f * (1 / w);

this.displacement = this.d;

// A*sin(Bx + C) + D

return (

this.amplitude * Math.sin(this.frequency * x + this.t) + this.displacement

);

}

render() {

this.t += this.speed;

ctx.save();

ctx.beginPath();

ctx.translate(0, h / 2);

ctx.lineWidth = 1;

ctx.moveTo(0, 0);

for (let i = this.step; i < w; i += this.step) {

ctx.lineTo(i, this.caculate(i));

}

ctx.lineTo(w, this.caculate(w));

ctx.lineTo(w, h);

ctx.lineTo(0, h);

ctx.fillStyle = this.color;

ctx.fill();

ctx.closePath();

ctx.restore();

}

```

Никакой особой магии не требуется, нарисовать волну несложно.

портал

Но те, кто немного почувствует, обнаружат, что вся анимация очень жесткая, как будто изображение панорамируется. Как может человек с идеалами терпеть.

😄 Улучшения

Легко обнаружить, что причина жесткости в том, что гребень волны всегда был таким высоким.Если размер гребня можно изменить с помощью покраски, все будет в порядке.

Добавьте небольшую деталь, определитеthis.kзначение, а затем изменить

this.amplitude = this.a;

изменить на

this.amplitude = this.a * sin(((this.t / this.k) * this.k) / 5);

Увидев это, вы можете задаться вопросом, откуда взялась эта загадочная функция.Наша цель состоит в том, чтобы изменить амплитуду соответствующим образом, поэтому мы умножаем ее на функцию sin, чтобы амплитуда изменялась вверх и вниз.

🐔 Наконец-то

Простая реализация дела

портал

Ссылка на ссылку

код спрей.IO/Wayne exists/spray...

Но Япония обнародовала .com/shots/36529…

Но Япония обнародовала .com/shots/37814…