jQuery background noise generator.
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%'
});
};
I've been experimenting with using javascript + canvas to draw background images.
This little jQuery plugin will automatically add some texture to an element like so:
jQuery('body').noisy();
It's still very much in the pre-alpha 'hack' stage. So try it out, but I wouldn't use it on your client's site just yet..
Comments are only visible to Forrst members. Log in or Request an invite.
