Espacio estelar en tu sitio web con Javascript
Código para no perder la línea--
Espero poder poner contenido dentro del espacio, que hasta ahorita no he podido.
Espero poder poner contenido dentro del espacio, que hasta ahorita no he podido.
-------------------------HTML5
<canvas id="canvas"></canvas>
-------------------------CSS3
#canvas{
width: 100%;
height: 150px;
background: black;
}
-------------------------CSS3
// Canva espacial black and estrellas
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// Crear lista de estrellas
const numEstrellas = 200;
const estrellas = [];
for (let i = 0; i < numEstrellas; i++) {
estrellas.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
tam: Math.random() * 5,
vel: Math.random() * 1.5 + 3.5 // Velocidad de movimiento
});
}
function animar() {
// Limpiar pantalla
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'white';
// Actualizar y dibujar cada estrella
estrellas.forEach(e => {
e.x += e.vel; // Mover a la derecha
// Si pasa el borde derecho, regresar a la izquierda (infinito)
if (e.x > canvas.width) {
e.x = 10;
e.y = Math.random() * canvas.height; // Nueva posición vertical opcional
}
// Dibujar estrella
ctx.fillRect(e.x, e.y, e.tam, e.tam);
});
requestAnimationFrame(animar);
}
animar();
Si logras poner contenido dentro del espacio, hay que compartir el como...
