Entrar Ainda não tem acesso?
3
respostas

Consegui, fiz uma haste pra bandeira também :)

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo, no capítulo Desenhando gráficos com Canvas e atividade Ordem e Progresso

por Lucas Silva Brites
| 33.9k xp | 1 posts
<canvas width="600" height="400">

</canvas>

<script>

  const canvas = document.querySelector("canvas");
  const pincel = canvas.getContext("2d");

  //BANDEIRA BRASIL:

  function retangulo(v1, v2, v3, v4){
    return pincel.fillRect(v1, v2, v3, v4)
  }


  //RETANGULO:
  pincel.fillStyle = "green"
  retangulo(0,0, 300, 200)

  //TRIANGULOS:
  pincel.fillStyle = "yellow"
  pincel.beginPath();
  pincel.moveTo(150, 30);
  pincel.lineTo(30, 100);
  pincel.lineTo(270, 100);
  pincel.fill();

  pincel.fillStyle = "yellow"
  pincel.beginPath();
  pincel.moveTo(150, 170);
  pincel.lineTo(30,100);
  pincel.lineTo(270,100);
  pincel.fill();

  //ESFERA:
  pincel.fillStyle = "blue"
  pincel.beginPath();
  pincel.arc(150, 100, 45, 0, 2 * 3.14)
  pincel.fill()

  //HASTE:

  pincel.fillStyle = "darkgrey"
  retangulo(0, 0, 15, 395)

    pincel.fillStyle = "brown"
    pincel.beginPath();
    pincel.arc(7.5, 392, 7.5, 0, 2 * 3.14)
    pincel.fill()

    retangulo(0,0, 15, 10)

</script>

teria um jeito de eu criar uma function para os triângulos e circulo assim como fiz para os retângulos? tentei fazer porém não consegui.

3 respostas
por Guilherme Henrique
| 733.8k xp | 2109 posts
Instrutor

Oi Lucas

Muito bom! Parabéns pelo empenho nos estudos!

Continue praticando e qualquer dúvida pode contar com a gente.

por Kátia Emilia Magalhães Avelar
| 12.8k xp | 8 posts

Olá, Lucas. Obrigada por compartilhar o seu código. Interessante a função que criou.

Vc já tinha feito curso de programação antes ?

por Roodney Felix Borges
| 38.8k xp | 9 posts
Administrador

Olá, Lucas! Achei genial a sua ideia de criar funções! Resolvi tentar responder a tua pergunta, se era possível criar uma função para as outras formas; tentei e deu certo. Porém, fiz um losango ao invés de dois triângulos. Muito obrigado por abrir a minha mente para essa possibilidade!

P.S.: Foi ótima essa escolha de colocar uma haste! Ficou muito bonito! Parabéns!

<!--bandeira_lucas.html-->

<canvas width="600" height="400">

</canvas>

<script>

    const canvas = document.querySelector("canvas");
    const pincel = canvas.getContext("2d");

    //BANDEIRA BRASIL:

    function desenhaRetangulo(v1, v2, v3, v4) {
        return pincel.fillRect(v1, v2, v3, v4)
    }

    function desenhaLosango(x1, y1, x2, y2, x3, y3, x4, y4) {

        pincel.beginPath();
        pincel.moveTo(x1, y1);
        pincel.lineTo(x2, y2);
        pincel.lineTo(x3, y3);
        pincel.lineTo(x4, y4);
        pincel.fill();
    }

    function desenhaEsfera(x, y, raio, angI, angF) {
        pincel.beginPath();
        pincel.arc(x, y, raio, angI, angF)
        pincel.fill();
    }

    //RETANGULO:
    pincel.fillStyle = "green"
    desenhaRetangulo(0, 0, 300, 200);

    //LOSANGO:
    pincel.fillStyle = "yellow"
    desenhaLosango(150, 30, 30, 100, 150, 170, 270, 100);

    //ESFERA:
    pincel.fillStyle = "blue"
    desenhaEsfera(150, 100, 45, 0, 2 * 3.14)

    //HASTE:

    pincel.fillStyle = "darkgrey"
    desenhaRetangulo(0, 0, 15, 395)

    pincel.fillStyle = "brown"
    desenhaEsfera(7.5, 392, 7.5, 0, 2 * 3.14)
    desenhaRetangulo(0, 0, 15, 10)

</script>