<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'lightgray';
pincel.fillRect(0, 0, 600, 400);
function desenhaCirculo(x, y, raio,cor) {
pincel.fillStyle = cor;
pincel.beginPath();
pincel.arc(x, y, raio, 0, 2*3.14);
pincel.fill();
}
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');
</script>
1
resposta
resposta
Saiu a flor.
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!