HTML5 efeito de gradiente no background

Sobre o Canvas

A tag Canvas é basicamente uma tag de imagem, sem uma fonte de imagem. Você especificar uma largura e uma altura para a área de desenho. Em vez de um atributo alt, você pode colocar HTML dentro da tag canvas-se para conteúdo alternativo. Verificando o método getContext () em um objeto canvas DOM é a maneira padrão de determinação de lona / browser compatibilidade.
NOTA. Esta demo irá funcionar nos seguintes navegadores. Opera, FireFox, Chrome, Safari. Ele vai NÃO funciona no Internet Explorer

Aqui está um exemplo das tags canvas HTML5.

<canvas height="600" width="600">
 <p>Your browser doesn't support the HTML5 Canvas. Try using Firefox or Google Chrome. </p>
 </canvas>

O JavaScript

A primeira coisa a fazer no código abaixo é a configuração do elemento de tela, por isso no código acima temos declarado o elemento na página, mas agora nós precisamos dizer o javascript para usá-lo. Então, para nós que esta configuração do contexto do elemento canvas como ’2 d ‘nesta fase, se falhar nesta fase e retorna false então o seu browser não suporta a tela.
O script pode ser dividido em duas seções. primeira seção configura o gradiente de cor dentro do nosso elemento canvas, eo segundo contém o mouse sobre a função que é o evento que é disparado quando você passa o mouse sobre a página de criação da área de queima branca em torno do seu mouse.

var canvas = document.getElementsByTagName('canvas')[0],
 ctx = null,
 grad = null,
 body = document.getElementsByTagName('body')[0],
 color = 255;

if (canvas.getContext('2d')) {
 ctx = canvas.getContext('2d');
 ctx.clearRect(0, 0, 300, 300);
 ctx.save();
 // Create radial gradient
 grad = ctx.createRadialGradient(0,0,0,0,0,600);
 grad.addColorStop(0, '#fff');
 grad.addColorStop(1, 'rgb(' + color + ', ' + color + ', ' + color + ')');

// assign gradients to fill
 ctx.fillStyle = grad;

// draw 600x600 fill
 ctx.fillRect(0,0,600,600);
 ctx.save();

body.onmousemove = function (event) {
 var width = window.innerWidth,
 height = window.innerHeight,
 x = event.clientX,
 y = event.clientY,
 rx = 600 * x / width,
 ry = 600 * y / width;

var xc = ~~(256 * x / width);
 var yc = ~~(256 * y / height);

grad = ctx.createRadialGradient(rx, ry, 0, rx, ry, 600);
 grad.addColorStop(0, '#fff');
 grad.addColorStop(1, ['rgb(', xc, ', ', (255 - xc), ', ', yc, ')'].join(''));

ctx.fillStyle = grad;
 ctx.fillRect(0,0,600,600);

};
 }
 

Este código é sem dúvida uma bela exibição do que pode ser feito com um trecho simples de JavaScript e o elemento canvas HTML5.