🥇 Definir tela como fundo do corpo

Quadrado Dinâmico de Ruído Sutil

Para gerar dinamicamente um pequeno pedaço de bondade com o canvas e defini-lo como um plano de fundo lado a lado para sua tag de corpo, você só precisa aproveitar a toDataURL()função. Abaixo está um exemplo rápido de configuração de ruído sutil como plano de fundo. Você pode ficar tão louco quanto quiser. A melhor parte é que você não precisa nem anexar o elemento canvas à página para usá-lo.

Veja a demonstração no CodePen

var c = document.createElement('canvas'),        
    ctx = c.getContext('2d'),
    cw = c.width = 200,
    ch = c.height = 200;

for( var x = 0; x < cw; x++ ){
    for( var y = 0; y < ch; y++ ){
        ctx.fillStyle = 'hsl(0, 0%, ' + ( 100 - ( Math.random() * 15 ) ) + '%)';
        ctx.fillRect(x, y, 1, 1);
    }
}

document.body.style.background = 'url(' + c.toDataURL() + ')';

Cenário

Resumindo, estamos fazendo um loop sobre cada pixel em um quadrado de 200 × 200 e preenchendo-o com um valor HSL com uma luminosidade aleatória entre 85 e 100. Depois de concluído, definimos o fundo do corpo para o conteúdo da tela com toDataURL(). O fundo então repete o quadrado por padrão.

Related Posts