Fondo de pantalla HTML en Java
ResueltoSorestudent8 -
Hola/Tarde,
Debo crear un sitio para SNT y tengo un problema,
tengo un fragmento de código en Java en mi HTML que quisiera enviar al fondo y hacerlo más grande para que sirva de fondo.
¿Podrías ayudarme o encontrar una alternativa, por favor?
Gracias de antemano.
PD: Aquí está la vista previa (y los números corren)
Y aquí está el código.
<center><canvas style="max-width: 100%; height:auto;" width="1358" height="612"></canvas></center> <script> var canvas = document.querySelector('canvas'), ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; var letters = 'ABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZ'; letters = letters.split(''); var fontSize = 10, columns = canvas.width / fontSize; var drops = []; for (var i = 0; i < columns; i++) { drops[i] = 1; } function draw() { ctx.fillStyle = 'rgba(0, 0, 0, .1)'; ctx.fillRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < drops.length; i++) { var text = letters[Math.floor(Math.random() * letters.length)]; ctx.fillStyle = '#0f0'; ctx.fillText(text, i * fontSize, drops[i] * fontSize); drops[i]++ if (drops[i] * fontSize > canvas.height && Math.random() > .95) { drops[i] = 0; } } } setInterval(draw, 33); </script>3 respuestas
¡Hola, puedes hacer algo así!
<!DOCTYPE html> <html> <head> <title> RAD ZONE Webcreation </title> <meta charset="utf-8"> <style type="text/css"> html, body { width:100%; height:100%; padding:0px; margin:0px; overflow: hidden; background-attachment: fixed } #projector { position: absolute; top: 0px; left: 0px; width:100%; height:100%; } </style> </head> <body> <canvas id="projector"> Su navegador no soporta el elemento Canvas. </canvas> <script> var canvas = document.querySelector('canvas'), ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; var letters = 'ABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZ'; letters = letters.split(''); var fontSize = 10, columns = canvas.width / fontSize; var drops = []; for (var i = 0; i < columns; i++) { drops[i] = 1; } function draw() { ctx.fillStyle = 'rgba(0, 0, 0, .1)'; ctx.fillRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < drops.length; i++) { var text = letters[Math.floor(Math.random() * letters.length)]; ctx.fillStyle = '#0f0'; ctx.fillText(text, i * fontSize, drops[i] * fontSize); drops[i]++ if (drops[i] * fontSize > canvas.height && Math.random() > .95) { drops[i] = 0; } } } setInterval(draw, 33); </script> </body> </html> ¿Te referías más bien a JavaScript? :-)
¡Hasta luego!
re
Esto dicho, te aconsejo que pongas un video de fondo, menos pesado para la CPU y ¡sin necesidad de un canvas! ¡Que podría causarte problemas para agregar contenido si no dominas bien su uso!
Algo así
<!DOCTYPE html> <html> <head> <title> RAD ZONE Webcreation </title> <meta charset="utf-8"> <style type="text/css"> #background-video { height: 100vh; width: 100vw; object-fit: cover; position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: -1; } h1, h2{ color: white; font-family: Georgia, serif; font-weight: bold; text-align: center; } h1 { font-size: 6rem; margin-top: 30vh; } h2 { font-size: 3rem; } /* opción botón #btnVideo { color: #8dffa2; font-size: 1.5rem; background: 0; border: 0; margin-left: 50%; font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; font-weight: bold; transform: translateX(-50%); }*/ </style> </head> <body> <video id="background-video" autoplay="" loop="" muted=""> <source src="http://radservebeer.free.fr/videomatrix/matrix.m4v" type="video/mp4"> <source src="http://radservebeer.free.fr/videomatrix/matrix.webm" type="video/webm"> </video> <div class="contenu"> <h1> A ti de encontrar el buen video </h1> <h2> Buena suerte </h2> <!-- opción botón play pause <button id="btnVideo" onclick="playAndPause()">Pausa II</button> --> </div> </body> <!--opción botón play pause <script> var video = document.getElementById("background-video"); var btn = document.getElementById("btnVideo"); function playAndPause () { if (video.paused) { video.play(); btn.innerHTML = "Pausa II"; } else { video.pause(); btn.innerHTML = "Reproducir ▶"; } } </script> */--> </html> A ti de adaptarlo a tus necesidades, no es más que un ejemplo!
PD: no dejes los enlaces a los videos, no los mantendré online por mucho tiempo, es solo para el ejemplo, ¡descárgalos si quieres!
a+
Hola,
muchas gracias por tu ayuda, he logrado llenar mi página con JavaScript pero aún no consigo que se quede en segundo plano ya que quiero que sea una especie de fondo para mi página.
Pero gracias de todos modos.
PD: elegí hacer un fondo en JavaScript (me equivoqué en el mensaje anterior) porque ya hice uno en otra página (estoy haciendo un sitio que enlaza a otras páginas) y quería diversificarme.
Y gracias de nuevo
hola
tienes que utilizar la propiedad css z-index: para colocar los elementos en diferentes planos, cuanto mayor sea el valor, más arriba estará el elemento! ese es el principio del orden de apilamiento de los elementos a menos que la posición del elemento declarado sea
position: static;
en claro
z-index:2 estará por encima de z-index:1 y z-index:3 estará por encima de los otros 2, etc, etc! pero también podemos poner z-index: negativo
pequeña página para comenzar simplemente que te hará entender visualmente el uso de esta propiedad z-index:
mira cómo el canvas fue declarado position: absolute; solo añadí
z-index:-999;
en el css del canvas y añade la div de texto en mi primer ejemplo y el texto está arriba
-999 permite estar bastante seguro de que todo estará por encima del canvas!
<!DOCTYPE html> <html> <head> <title> RAD ZONE Webcreation </title> <meta charset="utf-8"> <style type="text/css"> html, body { width:100%; height:100%; padding:0px; margin:0px; overflow: hidden; background-attachment: fixed } #projector { position: absolute; top: 0px; left: 0px; width:100%; height:100%; z-index:-999; } div.texte { color: #FFFFFF; text-align: center; } </style> </head> <body> <canvas id="projector"> Tu navegador no soporta el elemento Canvas. </canvas> <div class="texte"> <h2>un texto </h2> </div> <script> var canvas = document.querySelector('canvas'), ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; var letters = 'ABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZ'; letters = letters.split(''); var fontSize = 10, columns = canvas.width / fontSize; var drops = []; for (var i = 0; i < columns; i++) { drops[i] = 1; } function draw() { ctx.fillStyle = 'rgba(0, 0, 0, .1)'; ctx.fillRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < drops.length; i++) { var text = letters[Math.floor(Math.random() * letters.length)]; ctx.fillStyle = '#0f0'; ctx.fillText(text, i * fontSize, drops[i] * fontSize); drops[i]++ if (drops[i] * fontSize > canvas.height && Math.random() > .95) { drops[i] = 0; } } } setInterval(draw, 33); </script> </body> </html> a+