Как нарисовать анимированное пламя на Canvas?

Пользователь

от cloyd , в категории: Другие , год назад

Как нарисовать анимированное пламя на Canvas?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от caterina , год назад

@cloyd 

Пользователь

от charles.orn , 21 день назад

@cloyd 

Для создания анимированного пламени на элементе Canvas в HTML5, вы можете использовать JavaScript и HTML5 Canvas API. Вот пример кода, который позволит вам нарисовать анимированное пламя:

  1. Создайте файл HTML с элементом Canvas:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Flame</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script src="flame.js"></script>
</body>
</html>


  1. Создайте файл JavaScript (например, flame.js):
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

const fireColors = ['#FF6347', '#FFA500', '#FFD700', '#FFA500'];

function drawFlame(x, y, width, height) {
    const flameHeight = height / 2;
    const gradient = ctx.createRadialGradient(x, y, 0, x, y, flameHeight);

    for (let i = 0; i < fireColors.length; i++) {
        const colorStop = i / fireColors.length;
        gradient.addColorStop(colorStop, fireColors[i]);
    }

    ctx.fillStyle = gradient;
    ctx.fillRect(x - width / 2, y - flameHeight, width, flameHeight);
}

function animate() {
    requestAnimationFrame(animate);
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    const flameWidth = 40;
    const flameHeight = 80;

    drawFlame(canvas.width / 2, canvas.height + flameHeight, flameWidth, flameHeight);
}

animate();


Этот пример создаёт анимированное пламя на canvas, используя градиентные цвета для отображения огня. Анимация создается с помощью использования requestAnimationFrame, который обновляет полотно и вызывает функцию drawFlame для отрисовки пламени.


Вы можете настроить размер, цвета и форму пламени, чтобы получить желаемый эффект. Надеюсь, это поможет вам создать анимированное пламя на элементе Canvas!