/**
* @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);
* @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);
Комментариев нет:
Отправить комментарий