Как нарисовать анимированное море на Canvas?
2 ответа
от
maya ,
2 года назад
@lilla.herman
Для того, чтобы нарисовать анимированное море на Canvas, нужно выполнить следующие шаги:
- Создать Canvas элемент на странице HTML.
1
|
<canvas id="canvas"></canvas> |
- Получить контекст 2D для Canvas.
1 2 |
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
|
- Создать функцию для рисования воды и взрывов воды.
1 2 3 4 5 6 7 8 |
function drawWater() {
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillStyle = "blue";
context.fillRect(0, 0, canvas.width, canvas.height);
for(let i = 0; i < waterDroplets.length; i++) {
waterDroplets[i].draw();
}
}
|
- Создать класс для рисования отдельных капель воды.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
class WaterDroplet {
constructor(x, y, radius, speed) {
this.x = x;
this.y = y;
this.radius = radius;
this.speed = speed;
}
draw() {
context.beginPath();
context.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
context.lineWidth = 2;
context.fillStyle = "#4EA5D9";
context.fill();
context.strokeStyle = "#fff";
context.stroke();
this.update();
}
update() {
this.y -= this.speed;
if(this.y < -10) {
this.y = canvas.height + 10;
}
}
}
|
- Создать массив для хранения всех капель воды и добавить новые водяные капли каждые несколько секунд.
1 2 3 4 5 6 7 8 |
let waterDroplets = [];
setInterval(() => {
const x = Math.random() * canvas.width;
const y = canvas.height + 10;
const radius = Math.random() * 5 + 2;
const speed = Math.random() * 3 + 1;
waterDroplets.push(new WaterDroplet(x, y, radius, speed));
}, 300);
|
- Создать функцию анимации, которая будет отображать изменения в Canvas элементе.
1 2 3 4 5 |
function animate() {
requestAnimationFrame(animate);
drawWater();
}
animate();
|
Таким образом, простой пример анимированного моря на Canvas был создан!
от
nelle ,
год назад
@lilla.herman
Дополнительно можно добавить анимацию волн на водной поверхности, использовать различные оттенки синего для создания эффекта глубины, добавить реалистичный эффект брызг и пенения воды. Также можно экспериментировать с различными параметрами, такими как скорость и размер капель воды, чтобы добавить разнообразие и интерес в анимации.
15