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.


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.


	
	
	
	
	
	

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

publicado
Categorizado como Tutoriais, Web

Por Fellyph Cintra

Fellyph Cintra é um Google Developer Expert focado em tecnologias web, com participação ativa na comunidade WordPress. Com mais de 14 anos de experiência no mercado, Fellyph já palestrou em mais de 30 eventos ao redor do Brasil e Europa, sempre abordando as boas práticas de desenvolvimento na web.

Deixe um comentário

O seu endereço de e-mail não será publicado.