Introdução a canvas(HTML5) – parte 2

Com um delay de um ano estou dando continuidade a um post sobre canvas Introdução a canvas. Isso porque eu escutei de um amigo no face “oh fellyph achei um post seu sobre canvas, não tem nada lá”. Realmente tem pouca coisa no post foi um post bem básicão, só utilizar a tag canvas e criar um box. Os demos desse post vou adicionar no “JSdo.it”.

Neste Post vou tratar um pouco mais sobre a questão de cores, linhas e animação.

Revisando um pouco sobre cores função que define a cor de um context é a função fillStyle() com ela podemos passar os valores da seguinte forma:

ctx.fillStyle = "black";  
ctx.fillStyle = "#000000";  
ctx.fillStyle = "rgb(0,0,0)";  
ctx.fillStyle = "rgba(0,0,0,1)";  

No exemplo abaixo vou fazer um loop com quadrados randomizando duas posição x , y e sua transparência :


	%MINIFYHTML8f204494f4e6ba923c5efdba5d3938265%
	
	 %MINIFYHTML8f204494f4e6ba923c5efdba5d3938266%

O resultado é o seguinte :

Quadrados randomicos - jsdo.it - share JavaScript, HTML5 and CSS

O demo desse exemplo completo vocês conferem aqui : http://jsdo.it/Fellyph.Cintra/3ujk

Além das função "fillRect" podemos trabalhar com, "strokeRect", "clearRect", "arc" e "lineTo".
strokeRect cria uma forma retangular com apenas seu contorno(linhas), clearRect limpa a área especificada e a função arc serve para criar arcos e circulos junto com a lineTo ela entra no grupo dos path, gosto de traduzir um path como um elemnto complexo. Para trabalhar com o grupo dos "paths" precisamos de um número maior de passos que vamos ver depois desse primeiro exemplo.

Vamos a um exemplo usando as 3 funções(fillRect, strokeRect, clearRect) abaixo vou mostrar apenas a parte do js:

function init(){
   	var ctx = document.getElementById('meucanvas').getContext('2d');
	
    	for(i = 0 ; i < 4; i++ ){ 
	    for(j = 0; j < 4; j++ ){
		var posx = j * 100
		var posy = i * 100    
	    	ctx.fillStyle = 'rgb(230,0,0)' ;
    		ctx.fillRect(posx,posy,100,100);
		ctx.clearRect(posx  + 10, posy + 10,80,80);
		ctx.strokeRect(posx + 25,posy + 25,50,50);
	    }
	} 
    
}

o resultado é o seguinte :

padrão - jsdo.it - share JavaScript, HTML5 and CSS

Como podemos ver o fillStyle interfere apenas no fillRect o desenho gerado pela strokeRect não, isso por que função strokeRect trabalha com linhas para modicar as cores das linhas trabalhamos com a função strokeStyle que trabalha com os mesmos parâmetros utilizados pela função fillStyle.

Para trabalhar com elementos complexos precisamos de um número maior de passos em relação ao exemplo anterior. trabalhamos com quatro funções : beginPath(), closePath(), stroke(), fill(). No próximo exemplo vou usar um exercício que tinha usado em um post trabalhando com gráficos com Flash. Vou converter esse exercício em canvas.

function init(){
   
   	var ctx = document.getElementById('meucanvas').getContext('2d');
	// separei em três funções cada elemento do meu desenho
    	// uma para criar o quadrado, outra para o lozango e o circulo
    	criaQuadrado(ctx);
	criaLosango(ctx);
	criaBola(ctx);
    	
}

function criaQuadrado(_ctx){
			_ctx.fillStyle = "#008300";
			_ctx.fillRect(0,0,330,240);
		}

//essa função é resposável por criar o losango
function criaLosango(_ctx){
    
 		_ctx.fillStyle = "#FCFF00";
   	  	_ctx.beginPath();
   		_ctx.moveTo(165, 10);
		_ctx.moveTo(310,120);
		_ctx.lineTo(165,230);
		_ctx.lineTo(20 , 120);
		_ctx.lineTo(165,10);
    		_ctx.fill();
		_ctx.closePath(); 	
}
 
// essa função é responsável por criar um circulo
function criaBola(_ctx){
   	 _ctx.beginPath();
	_ctx.fillStyle = "#00027F";
	_ctx.arc(165,120,70,0,Math.PI*2,true);
   	_ctx.fill();
   	 _ctx.closePath(); 
    	 
}

Como no exemplo anterior deixei só a parte do js o exemplo completo você confere aqui : http://jsdo.it/Fellyph.Cintra/c5qu e o resultado é o seguinte :

Exemplo gráficos - jsdo.it - share JavaScript, HTML5 and CSS

Nos primeiros testes vi que a coisa funciona bem manual definir cada elemento dentro do contexto. Também tentei adicionar eventos de click, mas essa questão tem que ser tratado de uma forma especial porque o evento é aplicado em todo o canvas e não no contexto. Então se eu crio um quadrado dentro do canvas eu preciso tratar o over dele utilizando x e y mas claro que alguma alma iluminada já fez uma biblioteca para essa questão. Quando eu fiz o primeiro post sobre canvas achei essa biblioca jCotton quando estava pesquisando para o segundo post achei a biblioteca Kinetic JS. Deixo esses dois links para vocês pesquisarem serão base para meu próximo post sobre canvas.

Minha fonte para o post foi MDN Mozilla developer network

Vou parando por aqui e até o próximo post

Deixe uma resposta

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