Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Florzinha.

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 Nicolas lima da silva
| 41.8k xp | 18 posts
<canvas width="600" height="400"></canvas>

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'black';
    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();
    }



    function desenhaflor(x, y, cor){

        var tamanho = 20;

        pincel.fillStyle = 'green';
        pincel.fillRect(x - 10, y - 10, 20, 400);

        desenhaCirculo(x, y, tamanho, "yellow");

        desenhaCirculo(x+40, y, tamanho, cor);
        desenhaCirculo(x-40, y, tamanho, cor);
        desenhaCirculo(x, y+40, tamanho, cor);
        desenhaCirculo(x, y-40, tamanho, cor);
        desenhaCirculo(x+30, y+30, tamanho, cor);
        desenhaCirculo(x-30, y-30, tamanho, cor);
        desenhaCirculo(x-30, y+30, tamanho, cor);
        desenhaCirculo(x+30, y-30, tamanho, cor);

    }

    desenhaflor(300, 100, "red");
    desenhaflor(100, 200, "blue");

</script>
3 respostas
solução!
por Evelyn Reis
| 62k xp | 80 posts
Alura Scuba Team Scuba

Olá Nicolas, espero que esteja bem.

Obrigada por compartilhar seu código conosco.

Você pode compartilhar seus exercícios no Linkedin e/ou subir seu projeto no Github, pois estas ferramentas vão te permitir um maior alcance =)

Dúvidas sobre o conteúdo dos cursos, estaremos à disposição!

Se este post te ajudou, por favor, marca como solucionado ✓. Bons estudos!
por Nicolas lima da silva
| 41.8k xp | 18 posts

Fico cada dia mais entusiasmado, eu curti muito o suporte do fórum e de discord, eu pedi para me ajudarem a fazer um botao e adicionar uma flor e foi me ensinaram!

//me avisou q por enquanto não e preciso saber isso pois mais pra frente eu serei ensinado.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas width="600" height="400"></canvas>

    <button
      onclick="desenhaflor(posicaoArryx(), posicaoArryy(), listaCor[posicaoCor()])"
    >
      Gere uma flor.
    </button>

    <script>

      var listaCor = ["red", "blue", "pink", "white", "purple", "darkred"];
      var tamanho = 20;

      function posicaoCor() {
        return Math.floor(Math.random() * listaCor.length);
      }

      function posicaoArryy() {
        return Math.floor(Math.random() * 400);
      }

      function posicaoArryx() {
        return Math.floor(Math.random() * 600);
      }

      var tela = document.querySelector("canvas");
      var pincel = tela.getContext("2d");
      pincel.fillStyle = "black";
      pincel.fillRect(0, 0, 600, 400);

      var flores = [];

      function desenhaCirculo(x, y, raio, cor) {
        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2 * 3.14);
        pincel.fill();
      }

      function desenhaflor(x, y, cor) {
        flores.push(x, y, cor);
        desenha(x, y, cor);
      }

      function desenha(x, y, cor) {
          flores.forEach(_ => {
          pincel.fillStyle = "green";
          pincel.fillRect(x - 10, y, 20, 400);

          desenhaCirculo(x, y, tamanho, "yellow");

          desenhaCirculo(x + 40, y, tamanho, cor);
          desenhaCirculo(x - 40, y, tamanho, cor);
          desenhaCirculo(x, y + 40, tamanho, cor);
          desenhaCirculo(x, y - 40, tamanho, cor);
          desenhaCirculo(x + 30, y + 30, tamanho, cor);
          desenhaCirculo(x - 30, y - 30, tamanho, cor);
          desenhaCirculo(x - 30, y + 30, tamanho, cor);
          desenhaCirculo(x + 30, y - 30, tamanho, cor);
        });
      }
    </script>
  </body>
</html>
por Victor Bernardo Pinheiro Assunção
| 15k xp | 1 posts

Ficou top demais! Parabéns!