⇪

Ruido de fondo

facebook-svg gplus-svg twitter-svg

A continuación queremos construir un patrón que imita el ruido de fondo, como el de las pantallas antiguas de televisor.
Para esto dibujamos 10000 pequeños rectángulos ( 1 x 1 ) escampados aleatoriamente por todo el <canvas>
Utilizamos Math.random y Math.floor para calcular las coordinadas del origen (x,y) de cada rectángulo.
Sabemos que Math.random devuelve un número aleatorio entre 0 (inclusivo) y 1 (exclusivo) y que las coordenadas x e y tienen que tener valores entre 0 y la anchura, respectivamente la altura del <canvas>.

var x = Math.random() *canvas.width;
var y = Math.random() *canvas.height;

También sabemos que  las coordinadas del origen ( x,y ) de cada rectángulo, que tienen que ser íntegros. Para esto utilizamos Math.floor que redondea un número hacia abajo a su entero más cercano.

var x = Math.floor(Math.random() *canvas.width);
var y = Math.floor(Math.random() *canvas.height);

Cada rectángulo tendrá una opacidad diferente ( número entre 0 y 1 ), y para esto utilizamos de nuevo Math.random.

Su navegador no soporta canvas :( 

var canvas = document.getElementById("lienzo");
if (canvas && canvas.getContext) {
  var ctx = canvas.getContext("2d");
  if (ctx) {
    ctx.fillStyle = "#aaa";
    //10000 pequeños rectángulos escampados aleatoriamente por todo el canvas
    for (var i = 0; i < 10000; i++) {
      var x = Math.floor(Math.random() * canvas.width);
      var y = Math.floor(Math.random() * canvas.height);
      ctx.globalAlpha = Math.random();
      ctx.fillRect(x, y, 1, 1);
    }
  }
}
Su navegador no soporta canvas :(

La imagen cambiará cada vez que actualice la página. Para recuperar la imagen utilice toDataURL

var url = canvas.toDataURL();

Nota: Firefox nos permite abrir y guardar la imagen generada haciendo clic con el botón derecho del ratón, y escogiendo la opción deseada.