Introdução a Canvas HTML5

Depois de muito tempo longe de JavaScript, eu voltei a trabalhar com tecnologia(2010), tudo por conta da do tão temido HTML5. Recentemente comecei a fazer experimentos de Canvas HTML5 com ajuda do meu colega Leo(@leonardomarciel).

Algo inicialmente trabalhoso criar os elementos do zero via código e acabei descobrindo um framework bastante legal depois de algumas pesquisas.

Canvas API

Canvas API fornece maneiras de desenhar gráficos via JavaScript e via elemento HTML <canvas>. Com essa API podemos realizar animações, gráficos para jogos, visualização de dados, manipulação de fotos e processamento de vídeo em tempo real.

A Canvas API foca amplamente em gráficos 2D. A WebGL API, que também usa o elemento <canvas>. 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/

Os melhores navegadores do mercado Chome, Firefox, Opera e Safari dão suporte a Canvas HTML5. Atualmente (novembro de 2022) o suporte de canvas HTML5 é de quase 99% dos navegadores:

Suporte dos navegadores(2022) ao Canvas HTML5
Suporte dos navegadores(2022) ao Canvas HTML5

Como trabalhar com Canvas HTML5

Onde passamos o id do canvas HTML5 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 300px 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.

Para fazer o tratamento nesse caso incluímos na tag canvas HTML5 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>Code language: HTML, XML (xml)

Esse texto na tag aparecerá se o navegador não der suporte, na 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");		
}
Code language: JavaScript (javascript)

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.");
	}
}
Code language: JavaScript (javascript)

Agora que temos o todo o tratamento para o canvas vamos criar uma forma primitiva. Anteriormente só tinha exibido trechos do meu código HTML, dessa vez vou mostrar como o todo o esquema ficaria.

<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>
	
	
	<canvas id="meucanvas" width="200" height="200"> </canvas>Code language: HTML, XML (xml)

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 passo as três cores dos padrões 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").

Para mais conteúdo relacionado a desenvolvimento front-end confira os posts relacionados:


Publicado

em

,

por

Tags:

Comentários

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *