Depois de muito tempo longe de javascript, eu voltei a estudar-lo, tudo por conta da do tão temido html5. Comecei a fazer experimentos com ajuda de meu colega Leo(@leonardomarciel) com canvas. Comecei no basicão algo inicialmente trabalhoso e acabei descobrindo um framework bastante legal depois de algumas pesquisas.
Canvas é um elemento html que permite desenhar gráficos bitmap através da linguagem javascript, canvas faz parte das novas especificações do HTML (HTML5) mais informações aqui :
http://www.whatwg.org/specs/web-apps/current-work/
O melhores browser do mercado Firefox, Chome, Safari dão suporte a canvas.
O pior browser do mercado Internet Explorer NÃO dá suporte, ou seja se está usando ie não verá nada de canvas.
Para utilizar o elemento canvas fazemos da seguinte forma :
<canvas id="meucavas" width="50" height="50"></canvas>
Onde passamos o id do canvas para futuramente fazer referencia e as propriedades largura e altura, se as propriedades não forem definidas elas assumem os valores 300 de largura por 150 de altura. Também podemos definir a largura e altura por CSS mas ela corre o risco de distorcer a imagem.
Como a tag canvas é uma novidade do HTML ela não tem suporte nos browser mais antigos como o firefox 1.0 e internet explorer. Para fazer o tratamento nesse caso incluimos dentro da tag canvas o nosso conteúdo alternativo. No momento que o browser não der suporte ele irá ignorar a tag e ler o conteúdo seguinte.
<canvas id="meucanvas"> Se o browser não tiver suporte irá exibir esse texto. </canvas>
Esse texto dentro da tag vai aparecer se o browser não der suporte, dentro da tag também podemos colocar imagens como conteúdo alternativo ou até um elemento
Até agora só falei do elemento canvas não fiz nenhuma edição em nossa tag, mas agora vamos começar a editar nosso canvas, o elemento tem dois tipos de renderização 2D e 3D, ou como é chamado contexto de renderização. Nesse tutorial vamos trabalhar com o 2D.
Para acessar o contexto de renderização utilizamos o método getContext(), e passamos como parâmetro o tipo do contexto “2d” ou “3d”. O uso desse método é feito da seguinte forma:
function init(){ //acessando nosso elemento canvas var canvas = document.getElementById("meucanvas"); //definindo o contexto var ctx = canvas.getContext("2d"); }
Para fazer um tratamento caso o browser não tenha suporte a canvas fazemos da seguinte forma:
function init(){ var canvas = document.getElementById("meucanvas"); if(canvas.getContext){ var ctx = canvas.getContext('2d'); }else{ window.alert("desculpe seu browser não tem suporte a canvas, por favor instale um navegador descente."); } }
Agora que temos o todo o tratamento para o canvas vamos criar um forma primitiva. Anteriormente só tinha exibido trechos do meu código HTML, dessa vez vou mostrar como o todo o esquema ficaria.
<html>
<head>
<script type="application/javascript">
function init(){
//acessando nosso elemento pelo id
var canvas = document.getElementById("meucanvas");
// utilizando uma condicional caso o browser não
//tenha suporte
if(canvas.getContext){
var ctx = canvas.getContext("2d");
// definindo o preenchimento
// passamos como paramentro as cores rgb
ctx.fillStyle = "rgb(0,200,0)";
//desenhando um quadrado
//definimos os valores (x, y, largura, altura)
ctx.fillRect(40,40, 80 , 80 );
}else{
window.alert("desculpe seu browser não tem suporte a canvas, por favor instale um navegador descente.");
}
}
</script>
</head>
<body onload="init()">
<canvas id="meucanvas" width="200" height="200"> </canvas>
</body>
</html>Na linha que passo o preenchimento “fillStyle” posso passar outro parâmetro “rgba(200,0,0,0.5)” onde eu passo as três cores dos padrão rgb e opacidade do elemento(alpha). Nesse tutorial vamos parando por aqui, próximos posts vou falar mais sobre o assunto.