El ruido de la televisión es un patrón aleatorio de píxeles de puntos blancos y negros que se muestra cuando la antena receptora de los televisores u otros dispositivos similares no obtienen ninguna señal de transmisión. Para crear ese escenario como fondo, necesitaremos HTML, CSS y JavaScript. HTML se usa para crear el área del lienzo o puede usar todo el fondo como un área. CSS será aplicable para diseñar el fondo y JavaScript creará la animación de ruido de TV. Lo lograremos paso a paso. Los siguientes pasos se mencionan y describen uno por uno.
Sección HTML y CSS:
- Código HTML: cree un lienzo HTML5 en la página web.
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>TV noise Background</title> </head> <body> <canvas id="canvas"></canvas> <h1>GeeksforGeeks</h1> <h2>A Computer Science Portal for Geeks</h2> <h3>Animated TV noise Background</h3> </body> </html>
- Código CSS: edite el CSS del elemento del lienzo para que sea de pantalla completa.
html
<style>
#canvas {
z-index: -100;
position: absolute;
top: 0;
left: 0;
opacity: 0.8;
background-color: #fff;
}
h1 {
color: green;
font-size: 50px;
margin-bottom: 0;
}
body {
text-align: center;
}
</style>
Sección JavaScript:
- Código JavaScript: escribe código JavaScript para crear un efecto de ruido de TV animado.
javascript
<script>
var canvas = document.getElementById('canvas'),
/* The getContext() method returns an object
that provides methods and properties for
drawing on the canvas. */
ctx = canvas.getContext('2d');
/* Setting canvas width and height equal to
window screen width and height. */
function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
resize();
window.onresize = resize;
// Function to generate noise effect
function generate_noise(ctx) {
var w = ctx.canvas.width,
h = ctx.canvas.height,
/* This creates a new ImageData object
with the specified dimensions(i.e canvas
width and height). All pixels are set to
transparent black (i.e rgba(0,0,0,0)). */
idata = ctx.createImageData(w, h),
// Creating Uint32Array typed array
buffer32 = new Uint32Array(idata.data.buffer),
buffer_len = buffer32.length,
i = 0
for ( ; i < buffer_len; i++)
buffer32[i] =
((255 * Math.random()) | 0) << 24;
/* The putImageData() method puts the image
data (from a specified ImageData object)
back onto the canvas. */
ctx.putImageData(idata, 0, 0);
}
// Creating animation effect
var toggle = true;
(function loop() {
toggle = !toggle;
if (toggle) {
// Loop function is called each time
// before next repaint.
requestAnimationFrame(loop);
return;
}
generate_noise(ctx);
requestAnimationFrame(loop);
})();
</script>
Solución completa: el siguiente ejemplo demuestra la creación de un fondo como el ruido de un televisor. En esta sección, simplemente combinamos el código HTML, CSS y JavaScript.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TV noise Background</title>
<style>
#canvas {
z-index: -100;
position: absolute;
top: 0;
left: 0;
opacity: 0.8;
background-color: #fff;
}
h1 {
color: green;
font-size: 50px;
margin-bottom: 0;
}
body {
text-align: center;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<h1>GeeksforGeeks</h1>
<h2>A Computer Science Portal for Geeks</h2>
<h3>Animated TV noise Background</h3>
<script>
var canvas = document.getElementById('canvas'),
/* The getContext() method returns an object
that provides methods and properties for
drawing on the canvas. */
ctx = canvas.getContext('2d');
/* Setting canvas width and height equal
to window screen width and height. */
function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
resize();
window.onresize = resize;
// Function to generate noise effect
function generate_noise(ctx) {
var w = ctx.canvas.width,
h = ctx.canvas.height,
/* This creates a new ImageData object
with the specified dimensions(i.e canvas
width and height). All pixels are set to
transparent black (i.e rgba(0,0,0,0)). */
idata = ctx.createImageData(w, h),
// Creating Uint32Array typed array
buffer32 = new Uint32Array(idata.data.buffer),
buffer_len = buffer32.length,
i = 0
for (; i < buffer_len; i++)
buffer32[i] =
((255 * Math.random()) | 0) << 24;
/* The putImageData() method puts the
image data (from a specified ImageData
object) back onto the canvas. */
ctx.putImageData(idata, 0, 0);
}
// Creating animation effect
var toggle = true;
(function loop() {
toggle = !toggle;
if (toggle) {
// Loop function is called each
// time before next repaint
requestAnimationFrame(loop);
return;
}
generate_noise(ctx);
requestAnimationFrame(loop);
})();
</script>
</body>
</html>
Producción:
