Apesar do professor mencionar que não é preciso se preocupar com cálculo agora, gostaria de entender o seguinte no círculo:
- depois do raio 50, por que foi colocado, 0, 2 e multiplicou por 3.14. pincel.arc(300, 200, 50, 0, 2 * 3.14). Obrigada.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Apesar do professor mencionar que não é preciso se preocupar com cálculo agora, gostaria de entender o seguinte no círculo:
Deise,
no contexto, na instrução do professor:
pincel.arc(x, y, r, start, end);Na sua pergunta, start é zero, e end é 2*número Pi (π, aprox. 3.14 ou Math.PI em javascript).
Entenda que os ângulos inicial e final indicam onde vai começar e terminar a desenhar sua circunferência:
0.5 * 3.14 a circunferência vai começar a ser desenhada na posição 6 horas de um relógio;1 * 3.14 a circunferência vai começar a ser desenhada na posição 9 horas de um relógio;1.5 * 3.14 a circunferência vai começar a ser desenhada na posição 12 horas de um relógio;2 * 3.14 a circunferência vai começar a ser desenhada na posição 3 horas de um relógio;Os mesmos pontos valem para o ângulo final, e podem ser usados quaisquer valores, quebrados também.
No exemplo do professor, a circunferência será desenhada no sentido horário.
2 * 3.14 * raioBrinque com o código abaixo. Altere os valores de start, end e sentido para ver como se comporta seu desenho, e para entender na prática a instrução.
Bons estudos!
<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
var x = 300; //centro
var y = 200;
var raio = 50; //raio
var start = 1 ; //zero é "3 horas", 0.5 é "6 horas", 1 é "9 horas", 1.5 é "12 horas", 2 é "3 horas"
var end = 2;
var sentido = false; //false é horário, true é anti-horário. Se omitir no código, a instrução entende que vale 'false' - sentido horário.
pincel.strokeStyle = 'red';
pincel.beginPath();
pincel.arc(x, y, raio, start * Math.PI, end * Math.PI, sentido);
pincel.stroke();
</script>
Excelente explicação. Muito obrigada.