Fala, Jeferson! Como está!
Perfeito, meu amigo!
Vamos ver uma outra forma! ;-)
Como vemos, as variáveis X, Y e raio se repetem para que possamos desenhar cada círculo
desenhaCirculo (300,200,15,'red');
desenhaCirculo (330,200,15,'black');
desenhaCirculo (270,200,15,'orange');
desenhaCirculo (300,230,15,'blue');
desenhaCirculo (300,170,15,'yellow');
Para evitarmos isso, podemos guardar esses valores em variáveis
var x = 300;
var y = 200;
var raio = 15;
Feito isso, vamos moldar somando ou subtraindo as diferenças, por exemplo, x + 30 e y - 30
desenhaCirculo(x, y, raio, 'red');
desenhaCirculo(x + 30, y, raio, 'black');
desenhaCirculo(x - 30, y, raio, 'orange');
desenhaCirculo(x, y + 30, raio, 'blue');
desenhaCirculo(x, y - 30, raio, 'yellow');
Veja que o resultado esperado foi o mesmo!
Mas qual a vantagem?
Agora podemos mover a flor para diversos lugares do canvas sem mexer dentro dos parâmetros da função. Basta alterar os valores nas variáveis!
Faça o teste!
Altere a variável X e Y
var x = 200;
var y = 100;
var raio = 15;
\o/
Espero ter contribuído, Jeferson!
Um abraço e bons estudos!
