Acredito muito em <canvas> por ser uma tecnologia que já está no mercado a bastante tempo e boa parte dos browsers já aceita. O único browser que dá problema, vamos lá, adivinhem…. sim, é o Internet Explorer, nas versões 6, 7 e 8 porém eles tem o objeto deles (do famoso padrão Microsoft “me deu na telha criar isso”), chamado shape, esse objeto não é igual ao canvas, tem menos métodos, mas dá pra criar algo nele.
Mas existem frameworks, como o explorer canvas, que traduzem um código javascript que é feito em canvas, pra shape, ou seja, na teoria o Internet Explorer não é um problema pra desenvolvermos em canvas. Na teoria, já na prática alguns métodos não funcionam, como degradê radial e escrever texto em canvas também dá problemas.
Mas, ainda assim, graças ao mercado de mobile e tablets que não tem suporte ainda direito a flash, o uso de canvas pra interfaces de navegação ou até mesmo jogos. No site Canvas Demos dá pra ver dezenas de aplicações em canvas que se pode se comparar muito facilmente com sites feitos em flash. Porém são mais acessíveis, muitas vezes até pro IE6.
Vamos programar um pouco:
HTML
Só adicionar no seu html
<canvas id="canvas" width="300" height="300">
Seu browser não suporta canvas
</canvas>
Javascript
// função que move um objeto em circulos calculando x e y
var fx = function(centro_x, raio, incremento){
return (centro_x + raio*Math.cos(incremento/20))
}
var fy = function(centro_y, raio, incremento){
return (centro_y + raio*Math.sin(incremento/20))
}
// Contexto trata-se do estado objeto canvas
var contexto;
// O incremento é o que faz o objeto girar;
// se você calcular fx() com 0
// e depois calcular fx() com 1, 2, 3... etc
// a funcao retornará uma posição de X em forma de círculo
// e a mesma coisa com fy();
var incremento = 1;
var Canvas = {
// iniciando o objeto
_init:function(){
// Instanciando o contexto do canvas
// numa variavel global
contexto = document.getElementById('canvas').getContext("2d");
// aqui eu peço pra funçao que vai posicionar
// o canvas ser chamada a cada 30 milisegundos
return setInterval(Canvas._preencher, 30);
},
_preencher:function(){
// apagando o que tinha no canvas
// não é possível desenhar um objeto no canvas
// e depois mover ele pra isso é necessário
// apagar o conteudo do canvas
// e desenhar tudo novamente
contexto.clearRect(0,0,300,300);
/* CRIANDO UM QUADRADO COM DEGRADÊ */
// inicia o desenho
contexto.beginPath();
// cria um degradê
var my_gradient = contexto.createLinearGradient(300, 0, 0, 300);
// adiciona a cor de inicio
my_gradient.addColorStop(0, '#ff5');
// adiciona a cor final
my_gradient.addColorStop(1, "#f60");
// adiciona o degradê ao estilo do contexto
contexto.fillStyle = my_gradient;
// cria um quadrado 300x300 na posicao 0x0
contexto.fillRect(0, 0, 300, 300);
// fecha o desenho
contexto.closePath();
// CALCULANDO X E Y DO OBJETO
x = fx(150, 100, incremento);
y = fy(150, 100, incremento);
// acionando o incremento
incremento++;
// o incremento não precisa ser maior
// do que PI * 2 * Numero de vezes
// que vc quer pra dar uma volta
// assim fica mais facil e rapido pro js
// trabalhar com 0 a 63
// do que 0 a infinito
if( incremento == Math.PI * 2 * 20 ) incremento = 0
// CRIANDO O CIRCULO
// redefinindo o estilo do canvas pra pretro
contexto.fillStyle = "#000000";
// inicia um novo desenho
contexto.beginPath();
// criando o circulo
contexto.arc(x, y, 10, 0, Math.PI * 2, true);
// preenchendo a cor dele
contexto.fill();
// fecha o desenho
contexto.closePath();
}
}
// iniciando nosso js
window.onload = Canvas._init;
Resultado
E depois disso dá pra brincar, vejam outros exemplos que eu fiz, deu pra usar o explorer canvas, ou seja, é acessível pra todos os browsers, desde ie6 até iphone:
Com sombras
Estilo Vitrine
Quem se interessar, deixei todos os exemplos disponíveis pra download.
Danilo gosta de novas tecnologias é focado em HTML5 / Javascript.
