使用Canvas制作一个火焰跟随鼠标的动画
创建一个火焰跟随鼠标的动画涉及到多个步骤，包括创建canvas元素，监听鼠标事件，以及在canvas上绘制火焰。以下是一个基本的实现方式：
首先，在HTML中添加一个canvas元素：
<!DOCTYPE html>
<html>
<head>
<title>火焰跟随鼠标动画</title>
<style>
body { margin: 0; }
canvas { background: #000; display: block; }
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="script.js"></script>
</body>
</html>
然后，在script.js文件中添加以下JavaScript代码：
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// 设置canvas大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let flame = {
x: canvas.width / 2,
y: canvas.height / 2,
size: 50,
vx: 0,
vy: 0,
color1: 'orange',
color2: 'red',
};
function drawFlame(flame) {
let gradient = ctx.createRadialGradient(flame.x, flame.y, 0, flame.x, flame.y, flame.size);
gradient.addColorStop(0, flame.color1);
gradient.addColorStop(1, flame.color2);
ctx.beginPath();
ctx.arc(flame.x, flame.y, flame.size, 0, Math.PI * 2, false);
ctx.fillStyle = gradient;
ctx.fill();
}
function clearCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
function animate() {
clearCanvas();
drawFlame(flame);
requestAnimationFrame(animate);
}
function updateMousePos(e) {
flame.vx = (e.clientX - flame.x) * 0.1;
flame.vy = (e.clientY - flame.y) * 0.1;
}
function update() {
flame.x += flame.vx;
flame.y += flame.vy;
flame.vx *= 0.95;
flame.vy *= 0.95;
}
canvas.addEventListener('mousemove', updateMousePos);
animate();
setInterval(update, 16); // 更新频率可以根据需要调整
这段代码首先设置了一个flame对象，表示火焰，包含其位置、大小、速度和颜色等信息。drawFlame函数用于在canvas上绘制火焰，clearCanvas函数用于清除canvas。animate函数用于持续绘制火焰，updateMousePos函数根据鼠标位置更新火焰的速度，update函数根据速度更新火焰的位置，并稍微减小速度以模拟阻力效果。最后，通过setInterval定期更新火焰位置。
