在互联网的世界中，人们传递着各种信息，其中生日祝福就是比较常见的信息之一。而如何用技术手段来制作一个生日祝福的动画呢？下面我们就介绍一下用HTML语言来实现这个效果的完整代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>生日动画</title>
<style>
body{
margin: 0;
padding: 0;
}
canvas{
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var ctx = canvas.getContext("2d");
var stars = [];
var FPS = 30;
for (var i = 0; i < 200; i++) {
stars.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
radius: Math.random() * 1.5 + 0.5,
vx: Math.floor(Math.random() * (-10) + 5) / FPS,
vy: Math.floor(Math.random() * (-10) + 5) / FPS
});
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "rgba(255, 255, 255, 1)";
ctx.beginPath();
for (var i = 0; i < stars.length; i++) {
var star = stars[i];
ctx.moveTo(star.x, star.y);
ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2);
}
ctx.fill();
for (var i = 0; i < stars.length; i++) {
var star = stars[i];
star.x += star.vx;
star.y += star.vy;
if (star.x < 0 || star.x > canvas.width) {
star.vx = -star.vx;
}
if (star.y < 0 || star.y > canvas.height) {
star.vy = -star.vy;
}
}
}
setInterval(draw, 1000 / FPS);
</script>
</body>
</html>上述代码中，我们利用canvas标签和一些JS脚本来实现了生日动画效果，其中stars数组中保存了所有星星的信息，随机生成的星星在略微波动的背景中徐徐飘动，非常梦幻而充满情调。