Alguém consegue me explicar esses números da função desenhaFlor? Eu não consegui entender como faz essa "conta" pra saber o tamanho do desenhaCirculo nas cores. Eu sei que parece óbvio, mas não entendi.
function desenhaFlor(x, y) {
desenhaCirculo(x, y+20, 10, 'blue');
desenhaCirculo(x, y, 10, 'red');
desenhaCirculo(x, y-20, 10, 'yellow');
desenhaCirculo(x-20, y, 10, 'orange');
desenhaCirculo(x+20, y, 10, 'black');
}
desenhaFlor(300, 200);
Boa tarde Bianca,
Se entendi a sua pergunta, você quer saber o que são os números (300, 200), correto?
Esses números são a posição x (width) e y (height) no Canvas que são passadas por parâmetro, utilizadas dentro da função desenhaCirculo,
Na função desenhaCirculo tem o posicionamento dos círculos no Canvas, baseados nos parâmetros passados anteriormente, dando o aspect desejado da Flor, uma vez que são desenhados 5 círculos um na posição passada (300,200) e os outros com uma leve translação do centro do círculo, bem como o seu raio.
Sobre a conta, você tem na função desenhaCirculo o raio do círculo, que são 10 pixels a partir do centro. Para não ter uma sobreposição dos círculos, é necessário mover o centro deles com o dobro do raio.
Acho que entendi. Os parâmetros (300, 200) são as coordenas do círculo do centro (vermelho). Os outros círculos são posicionados a partir deste. Então "x, y+20" posiciona o círculo azul abaixo do círculo do vermelho. Ou seja, x, y+20 = 300, 220. A lógica é a mesma para os outro círculos, mudando apenas as suas coordenadas.