09_Effect

🍀Space Style_01

🍀Space Style_02

#소스코드

<!DOCTYPE html>

<head>

<style>

body, html {

margin: 0;

padding: 0;

background: #0c0c0c;

overflow: hidden;

height: 100%;

}

canvas {

display: block;

}

</style>

</head>

<body>

const canvas = document.getElementById('starfield');

const ctx = canvas.getContext('2d');

let stars = [];

const numStars = 350;

let width, height, centerX, centerY;

function initializeStars() {

width = canvas.width = window.innerWidth;

height = canvas.height = window.innerHeight;

centerX = width / 2;

centerY = height / 2;

stars = [];

for (let i = 0; i < numStars; i++) {

stars.push({

x: Math.random() * width - centerX,

y: Math.random() * height - centerY,

z: Math.random() * width,

o: '0.' + Math.floor(Math.random() * 99) + 1

});

}

function animate() {

ctx.fillStyle = 'black';

ctx.fillRect(0, 0, width, height);

for (let i = 0; i < numStars; i++) {

let star = stars[i];

star.z -= 0.5;

if (star.z <= 0) {

star.z = width;

star.x = Math.random() * width - centerX;

star.y = Math.random() * height - centerY;

star.o = '0.' + Math.floor(Math.random() * 99) + 1;

}

let k = 128.0 / star.z;

let px = star.x * k + centerX;

let py = star.y * k + centerY;

if (px >= 0 && px <= width && py >= 0 && py <= height) {

let size = (1 - star.z / width) * 5;

ctx.fillStyle = 'rgba(255,255,255,' + star.o + ')';

ctx.beginPath();

ctx.arc(px, py, size, 0, Math.PI * 2);

ctx.fill();

}

requestAnimationFrame(animate);

}

window.addEventListener('resize', initializeStars);

initializeStars();

animate();

</script>

</body>

</html>