HTML5宇宙星空代碼
<!DOCTYPE html>
<html>
<head>
<title>宇宙星空</title>
<style>
canvas {
background: #000;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var stars = [];
var maxStars = 1000; // 星星數(shù)量
for (var i = 0; i < maxStars; i++) {
var star = {
x: Math.random() * canvas.width, // 隨機(jī)位置
y: Math.random() * canvas.height,
radius: Math.random(), // 隨機(jī)大小
vx: Math.floor(Math.random() * 10) - 5, // x軸方向速度
vy: Math.floor(Math.random() * 10) - 5, // y軸方向速度
};
stars.push(star);
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#fff";
for (var i = 0; i < maxStars; i++) {
var star = stars[i];
ctx.beginPath();
ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2);
ctx.fill();
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;
}
}
requestAnimationFrame(draw);
}
draw();
</script>
</body>
</html>本代碼使用HTML5的canvas繪制了一個宇宙星空的效果。代碼中使用了<canvas>標(biāo)簽來創(chuàng)建畫布，并使用了JavaScript實(shí)現(xiàn)了星星的移動、碰撞反彈等動畫效果。可以通過修改代碼中的maxStars來調(diào)整星星的數(shù)量，也可以修改stars中的屬性來控制星星的運(yùn)動軌跡。