在互聯網的世界中，人們傳遞著各種信息，其中生日祝福就是比較常見的信息之一。而如何用技術手段來制作一個生日祝福的動畫呢？下面我們就介紹一下用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數組中保存了所有星星的信息，隨機生成的星星在略微波動的背景中徐徐飄動，非常夢幻而充滿情調。