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.
Nossa, muito legal eu ainda que estava procurando um tutorial desses para aprender de vez….rsr….
Sensacional. Canvas parece não ter limites para quem é criativo como você. Estou usando o ópera 11 e ele exibe as imagens perfeitamente.
Parabéns.
Preciso demais me atualizar com relação aos elementos novos do HTML5 e do javascript… quero ver se dá pra fazer com o canvas operações 3D (rotacionar, transladar, etc…) e carregar, por exemplo, uma imagem paea dentro dele. Seria bem interessante!
Abs!
O_O Preciso urgente estuda de novo OLoKoMEU Show
preciso de uma funçao que detecta um objeto e faça o avatar parar qaundo colidir com o objeto mais nao consigo sera que vc nao pode me dar uma ajudinha o codigo que faz mover o avatar com o mouse é mais ou menos assim:
function move (){
if(xmouse playerx){playerx++;}
if(ymouse playery){playery++;}
}
o site que tem o jogo é esse aqui mais nao tem essa funçao veja:
http://glacialflame.com/tutorials/tiles/06/