Как нарисовать анимированное пламя на Canvas?
2 ответа
от
charles.orn ,
месяц назад
@cloyd
Для создания анимированного пламени на элементе Canvas в HTML5, вы можете использовать JavaScript и HTML5 Canvas API. Вот пример кода, который позволит вам нарисовать анимированное пламя:
- Создайте файл 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>
|
- Создайте файл 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!
15