Return to Snippet

Revision: 43397
at March 23, 2011 08:27 by secretgspot


Initial Code
jQuery.fn.noisy = function(opacity) {
  if (typeof(opacity) === 'undefined') {
    opacity = 0.1;
  }

  var wrapper = jQuery(this).wrapInner('<div />').children();
  var canvas = document.createElement("canvas");
  canvas.width = 100;
  canvas.height = 100;
  var ctx = canvas.getContext("2d");
  var x, y;
  for (x=0; x<canvas.width; x += 1) {
    for (y=0; y<canvas.height; y += 1) {
      var r = Math.floor(Math.random() * 75);
      var g = Math.floor(Math.random() * 75);
      var b = Math.floor(Math.random() * 75);
      ctx.fillStyle = "rgba("+r+","+g+","+b+","+opacity+")";
      ctx.fillRect(x, y, 1, 1);
    }
  }

  wrapper.css({
    'background-image': "url("+canvas.toDataURL("image/png")+")",
    width: '100%',
    height: '100%'
  });
};

Initial URL

                                

Initial Description
run using: jQuery('body').noisy();

Initial Title
jquery function to generate Noise bg image

Initial Tags

                                

Initial Language
jQuery