Caro Instrutor!
Como utilizo a função arc para desenhar metade de uma bola para cima e outra bola metade para baixo, tipo arquitetura de Brasília, do Congresso Nacional.
No aguardo.
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!
Caro Instrutor!
Como utilizo a função arc para desenhar metade de uma bola para cima e outra bola metade para baixo, tipo arquitetura de Brasília, do Congresso Nacional.
No aguardo.
Olá Eberson,
como foi dito na aula, os primeiros dois parâmetros do método arc são as coordenadas X e Y do centro do círculo, o terceiro parâmetro é o valor do raio e o quarto e quinto parâmetros definem o ângulo inicial e final do círculo.
No caso, o ângulo é dado em números radianos, que vão de 0 a 2*3.14 (equivalente a 360º). Ou seja, como queremos que o círculo varra apenas metade do círculo (180º), vamos então de 0 a 1*3.14.
pincel.arc(100, 100, 50, 0, 1*3.14);Como o próximo arco começa em 180º e vai até o zero novamente, temos os mesmos parâmetros, porém na ordem inversa:
pincel.arc(200, 100, 50, 1*3.14, 0);Além disso, alteramos o primeiro parâmetro para deslocar o nosso arco 100 unidades para a direita.
No final, o código inteiro fica assim:
<canvas id="tela" width="600" height="400"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.beginPath();
pincel.arc(100, 100, 50, 0, 1*3.14);
pincel.arc(200, 100, 50, 1*3.14, 0);
pincel.fill();
</script>