Fork me on GitHub
Você esta em:Home » Destaque » HTML5 efeito de gradiente no background

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.

Sobre o Autor

Designer, Web Developer & Linux Administrator

Meu nome é Deivison Arthur, tenho 29 anos, sou Administrador Linux, Analista de Sistema, Webdesigner e Pesquisador. há mais de dez anos. Nasci no Rio de Janeiro, atualmente trabalho como Gerente de Tecnologia e E-commerce at Grupo FFernandes e Freelancer nas horas vagas. Desenvolvimento em Joomla, Wordpress, Drupal, Magento e outros GPLs...

Quantidade de Artigos : 114

Comentários (3)

  • Rafael Lima

    Ola primeiramente parabéns pelo site.

    Bom gostaria de saber se a possibilidade de adaptar esse código de fundo gradiente em uma plataforma do blogger? se sim como?

    Responder
    • Deivison Arthur L. Serpa

      Olá amigo, obrigado! Basta juntar os 2 códigos acima e inseri-los entre a tag script e esse script entre as tags body

      Vai ficar +/- assim:

      <body>
      <canvas height="600" width="600"><p>Your browser doesn’t support the HTML5 Canvas. Try using Firefox or Google Chrome</p></canvas>
      <script>
      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 600×600 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.restore();
      ctx.fillStyle = grad;
      ctx.fillRect(0,0,600,600);
      ctx.save();
      };
      }
      </script>
      </body>

      Responder

Enviar Comentário

© 2012 Powered By Wordpress, Deivison Arthur

Ir para cima