A noisy background

/**
 * @param  {HTMLElement}  el    target element
 * @param  {String}      color       background color
 * @param  {Number}   width      noise pattern width
 * @param  {Number}   height     noise pattern height
 * @param   {Number}   opacity    noise opacity
 */
function setNoiseBackground(el, color, width, height, opacity){
var canvas   = document.createElement("canvas");
  var context  = canvas.getContext("2d");

canvas.width = width;
canvas.height = height;

for( var i = 0; i < width; i++ ){
  for( var j = 0; j < height; j++ ){
    var val = Math.floor(Math.random() * 255);
    context.fillStyle = "rgba(" + val + "," + val + "," + val + "," + opacity + ")";
    context.fillRect(i, j, 1, 1);
  }
}

el.style.backgroundColor = color;
el.style.backgroundImage = "url(" + canvas.toDataURL("image/png") + ")";
}

// Usage
setNoiseBackground(document.body, "#F4F5EC", 50, 50, 0.01);

Комментариев нет:

Отправить комментарий