Canvas é uma tag 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 Chome, Firefox, Opera e 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 referência como um elemento html normal e as propriedades largura e altura, se essas propriedades de largura e altura não forem definidas elas assumem os valores 300 px de largura por 150 px de altura. Também podemos definir a largura e altura por CSS mas corremos o risco de distorcer a imagem gerada pelo canvas.
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 exibindo um alerta para o usuário 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 mais um parâmetro na chamada da função “rgba(200,0,0,0.5)” onde eu passo as três cores dos padrão rgb e opacidade do elemento(alpha). Outra opção é passar um código hexadecimal como parâmetro na função fillStyle, por exemplo fillStylle(“#00CC00″). Nesse tutorial vamos parando por aqui, deixo aqui o link do demo do tutorial : http://jsdo.it/Fellyph.Cintra/4f12
