Entrar Ainda não tem acesso?
3
respostas

Uma flor com caule e folha ♥

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo, no capítulo Extraindo funções e atividade Uma inofensiva flor...

por Natallia Bonadia
| 12.7k xp | 7 posts
<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();
  }

  pincel.fillStyle = 'green'
  pincel.fillRect(298, 220, 4, 80)
  pincel.beginPath()
  pincel.moveTo(300, 240)
  pincel.lineTo(320, 250)
  pincel.lineTo(300, 260)
  pincel.fill()

  desenhaCirculo(300, 185, 10, 'red')
  desenhaCirculo(300, 215, 10, 'red')
  desenhaCirculo(285, 200, 10, 'red')
  desenhaCirculo(315, 200, 10, 'red')
  desenhaCirculo(300, 200, 10, 'yellow')

</script>
3 respostas
por Otávio Prado
| 4790.8k xp | 9225 posts

Muito bom Natallia

Uma dica é criar a function desenhaFlor:

    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);
por Caique Calíope Oliveira Corcovia
| 77.6k xp | 101 posts

awn! ficou muito fofinha :3

por ARTUR MAGALHAES PEQUENO
| 36.2k xp | 16 posts
Consultoria Empresarial em Compliance e Projetos

Natália, que fofura! Espero que você não se importe se eu usar um pedacinho do seu código pra aprimorar a minha própria versão :D Se quiser conferir um joguinho que eu montei com base nesse exercício, vou deixar aqui embaixo o link.

Se puder depois mandar um comentário construtivo, eu agradeço!

https://gist.github.com/arturpequeno/b6c0f67aa5a75208434f423af68b7628