No artigo anterior, fizemos uma introdução sobre o canvas, um novo e poderoso elemento entre as inúmeras
novas funcionalidades do HTML 5. Vimos como implementar um
contexto de canvas 2D em seu código HTML.

Hoje vamos 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. O que acha de agora 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
possui quatro parâmetros: cp1x e cp1y são a referê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 referência 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 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 😀