Leonardo Moreira

Fala galera, tudo certo? Primeiro quero pedir desculpas pela demora na publicação da parte 2 da série falando sobre o elemento canvas, estou com bastante projetos em desenvolvimento, mas aqui estamos. Se você ainda não leu a primeira parte, clique aqui.

Nesse post vou falar sobre os métodos bezierCurveTo, quadraticCurveTo, arc e como aplicar tudo isso no elemento canvas, vamos lá?

arc

Para desenhar arcos e círculos, usamos o método arc. Esse método tem cinco parâmetros: X e Y são as coordenadas central do nosso desenho, radius é a metade do diâmetro da nossa circunferência (nem preciso explicar ), startAngle e o endAngle são os parâmetros que define o ponto inicial e final a partir do eixo X e finalmente o parâmetro anticlockwise que recebe um valor booleano, se esse valor for true define o sentido anti-horário para iniciar o nosso desenho, caso contrário, inicia o desenho no sentido horário.

arc(x, y, radius, startAngle, endAngle, anticlockwise)

Observação: Os ângulos no método arc são calculados em radiano, não em graus. Para converter graus em radiano, use:

var radiano = (Math.PI/180)*graus

Vamos aos exemplos de como usar o arc. Nesse primeiro exemplo, colocaremos o endAngle com intervalos de 90 graus e o anticlockwise definido como false, ou seja, está criando o nosso círculo no sentido horário.

window.addEventListener('load', function () {
	var canvas = document.getElementById('tutorial');

	if (canvas.getContext){
		var context = canvas.getContext('2d');

		for(var i=1; i<5; i++){

			var x              = i*50;
			var y              = 50;
			var radius         = 20;
			var startAngle     = 0;
			var endAngle       = (Math.PI*i)/2;
			var anticlockwise  = false;

			context.beginPath();
			context.arc(x, y, radius, startAngle, endAngle, anticlockwise);
			context.stroke();
		}
	} else {
		alert('You need a modern browser : )');
	}

}, false);

Veja esse exemplo funcionando, clique aqui.
Resultado:

Agora vamos definir o anticlockwise como true e gerar nossos círculos no sentido anti-horário.

var anticlockwise  = true;

Veja esse exemplo funcionando, clique aqui.
Resultado:

Formas Orgânicas

Já vimos como criar formas primitivas e agora o que acha de trabalhar um pouco com desenhos orgânicos? Vamos ver um pouco sobre Curva de Bézier, se você ainda não sabe ou nunca ouviu falar, dá uma conferida nesse link: Curva de Bézier.

Resumindo, uma curva Bézier quadrática tem apenas um ponto de controle, enquanto que uma curva de Bézier cúbica usa dois pontos de controle.

quadraticCurveTo

Vamos começar com o método quadraticCurveTo. Esse método possúi quatro parâmetros: cp1x e cp1y são a refência do ponto de controle e os parâmetros x e y são as coordenadas do ponto final.

quadraticCurveTo(cp1x, cp1y, x, y)

Vamos ver como fica uma curva de Bézier quadrática:

window.addEventListener('load', function () {

	var canvas = document.getElementById('tutorial');

	if (canvas.getContext){
		var context = canvas.getContext('2d');

			context.lineWidth =  3; //Define o tamanho da linha do stroke.

			var x     = 240; // Define o eixo X do ponto final
			var y     = 60; // Define o eixo Y do ponto final
			var cp1x  = 30; // Define o eixo X do ponto de controle
			var cp1y  = 20; // Define o eixo Y do ponto de controle

			context.beginPath();
			context.moveTo(30, 90); // Define o ponto inicial do desenho, se você tiver dúvidas de como usar moveTo, veja a parte 1 desse tutorial.
			context.quadraticCurveTo(cp1x, cp1y, x, y);
			context.stroke();

	} else {
		alert('You need a modern browser : )');
	}

}, false);

Veja esse exemplo funcionando, clique aqui.
Resultado:

O ponto vermelho na imagem representa o ponto de controle e os pontos azuis representam o ponto inicial e final do meu desenho.

bezierCurveTo

O método bezierCurveTo não é muito diferente do anterior, possui um ponto de controle a mais, então agora teremos os seguintes parâmetros:

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

Onde cp2x e cp2y são a refêrencia do nosso segundo ponto de controle. Vamos ao exemplo:

window.addEventListener('load', function () {

	var canvas = document.getElementById('tutorial');

	if (canvas.getContext){
		var context = canvas.getContext('2d');

			context.lineWidth =  3; //Define o tamanho da linha do stroke.

			var x     = 240; // Define o eixo X do ponto final
			var y     = 60;  // Define o eixo Y do ponto final
			var cp1x  = 60;  // Define o eixo X do PRIMEIRO ponto de controle
			var cp1y  = 10;  // Define o eixo Y do PRIMEIRO ponto de controle
			var cp2x  = 210; // Define o eixo X do SEGUNDO ponto de controle
			var cp2y  = 20;  // Define o eixo Y do SEGUNDO ponto de controle

			context.beginPath();
			context.moveTo(30, 90); // Define o ponto inicial do desenho, se você tiver dúvidas de como usar moveTo, veja a parte 1 desse tutorial.
			context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
			context.stroke();

	} else {
		alert('You need a modern browser : )');
	}

}, false);

Veja esse exemplo funcionando, clique aqui.
Resultado:

Os pontos vermelhos na imagem representam os pontos de controle e os pontos azuis representam o ponto inicial e final do meu desenho.

Conclusão

Trabalhar com formas orgânicas não é fácil, pois não temos uma ferramenta para visualizar o que estamos fazendo como o Adobe® Photoshop® ou Adobe® Illustrator®, mas com um pouco de paciência é possível gerar resultados bem legais.

Na parte 3 da série “HTML 5 na prática, Canvas” vou falar sobre imagens, como usar e manipular uma imagem com HTML5.

Até a próxima