Introdução a Canvas (HTML5)

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. Iniciei no basicão, algo inicialmente trabalhoso criar os elementos do zero via código e acabei descobrindo um framework bastante legal depois de algumas pesquisas.

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 :

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.


Se o browser não tiver suporte irá exibir esse texto.

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.


	%MINIFYHTML96779cf07b3977f48cf78835b653c3485%
	
	 %MINIFYHTML96779cf07b3977f48cf78835b653c3486%

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

Deixe uma resposta

This site uses Akismet to reduce spam. Learn how your comment data is processed.