HTML 5 na prática, Canvas – Parte 02

No artigo anterior, fizemos uma introdução sobre o canvas, um novo e poderoso elemento entre as inúmeras
novas funcionalidades do HTML↳HTML45 conteúdosA importância do HTML e CSS para quem trabalha com UI Design e Design SystemProduto & UX · dez 2024Como hostear seu site HTML gratuitamente com GitHub PagesDev (Back & Front) · jun 2025SQL Server – Como criar um versionamento de código das suas Stored Procedures em HTML e com comentários da alteraçãoData · nov 2020Ver tudo em Dev (Back & Front) → 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 () {<br />	var canvas = document.getElementById('tutorial');<br /><br />	if (canvas.getContext){<br />		var context = canvas.getContext('2d');<br /><br />		for(var i=1; i<5; i++){<br /><br />			var x              = i*50;<br />			var y              = 50;<br />			var radius         = 20;<br />			var startAngle     = 0;<br />			var endAngle       = (Math.PI*i)/2;<br />			var anticlockwise  = false;<br /><br />			context.beginPath();<br />			context.arc(x, y, radius, startAngle, endAngle, anticlockwise);<br />			context.stroke();<br />		}<br />	} else {<br />		alert('You need a modern browser.');<br />	}<br /><br />}, 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 () {<br /><br />	var canvas = document.getElementById('tutorial');<br /><br />	if (canvas.getContext){<br />		var context = canvas.getContext('2d');<br /><br />			context.lineWidth =  3; //Define o tamanho da linha do stroke.<br /><br />			var x     = 240; // Define o eixo X do ponto final<br />			var y     = 60;  // Define o eixo Y do ponto final<br />			var cp1x  = 30;  // Define o eixo X do ponto de controle<br />			var cp1y  = 20;  // Define o eixo Y do ponto de controle<br /><br />			context.beginPath();<br />			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.<br />			context.quadraticCurveTo(cp1x, cp1y, x, y);<br />			context.stroke();<br /><br />	} else {<br />		alert('You need a modern browser.');<br />	}<br /><br />}, 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 () {<br /><br />	var canvas = document.getElementById('tutorial');<br /><br />	if (canvas.getContext){<br />		var context = canvas.getContext('2d');<br /><br />			context.lineWidth =  3; //Define o tamanho da linha do stroke.<br /><br />			var x     = 240; // Define o eixo X do ponto final<br />			var y     = 60;  // Define o eixo Y do ponto final<br />			var cp1x  = 60;  // Define o eixo X do PRIMEIRO ponto de controle<br />			var cp1y  = 10;  // Define o eixo Y do PRIMEIRO ponto de controle<br />			var cp2x  = 210; // Define o eixo X do SEGUNDO ponto de controle<br />			var cp2y  = 20;  // Define o eixo Y do SEGUNDO ponto de controle<br /><br />			context.beginPath();<br />			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.<br />			context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);<br />			context.stroke();<br /><br />	} else {<br />		alert('You need a modern browser.');<br />	}<br /><br />}, 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 😀