Bandeira-Brasil | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

Solucionado (ver solução)

Solucionado
(ver solução)

3
respostas

por Talita Azevedo

| 218.4k xp | 182 posts

Moderador

Pessoal, Estava tentando desenhar a bandeira do Brasil com javascript, e logo após terminar fui comparar meu código com o do professor, estava um pouco diferente, poderiam me dizer se estou no caminho certo? poderia melhorar ? segue abaixo meu código.

<body>
  <canvas width="600" height="400"></canvas>
  <script>
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');

        pincel.fillStyle = 'green';
        pincel.fillRect(0, 0, 600, 400);



        //  triangulo parte direita
        pincel.fillStyle = 'yellow';
        pincel.beginPath();
        pincel.moveTo(300, 50);
        pincel.lineTo(300, 350);
        pincel.lineTo(550, 200);
        pincel.fill();

      //  triangulo parte esquerda

        pincel.beginPath();
        pincel.moveTo(300, 50);
        pincel.lineTo(300, 350);
        pincel.lineTo(50, 200);
        pincel.fill();

        //circulo
        pincel.fillStyle ='darkblue';
        pincel.beginPath();
        pincel.arc(300, 200, 100, 0, 2 * 3.14);
        pincel.fill();



  </script>


</body>

3 respostas

solução!

por Joel Spinelli

| 620.9k xp | 630 posts

Desenvolvedor Node e Front End

20/03/2017

Oi Talita,

eu dei uma olhada aqui no código e no resultado, infelizmente eu não tenho como comparar com o da aula pois não fiz o curso xD

Mas vamos lá, esse foi o código que você fez certo? Talvez pesquisou alguma coisa na internet, fez uma revisão nas aulas, mas foi você que fez, certo? Se sim, eu acho que você está no caminho certo, pois talvez o código que o professor fez ficou mais simples, porém você atingiu o mesmo resultado, e isso é o mais importante, e seu código está bem simples e documentado. Agora "melhorar" sempre tem como, vai do sei conhecimento de programação e da API, talvez somente reorganizar o código (não que o seu está desorganizado, pelo contrário), é uma forma de melhorar.

Bom acredito que você se saiu muito bem!

por Talita Azevedo

| 218.4k xp | 182 posts

Moderador

20/03/2017

obg ajudou muito seu feedback.

\0/

por André Gustavo dos Santos Rodrigues

| 194.9k xp | 25 posts

20/03/2017

Boa noite, o topico ja foi marcado como solucionado mas to colando do jeito que eu fiz, no lugar de dois triangulos faz logo um losango.

<canvas width="600" height="400"></canvas>
<script type="text/javascript">
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

    pincel.fillStyle = 'darkgreen';
    pincel.fillRect(0,0, 600, 400);

    pincel.fillStyle = 'yellow';
    pincel.beginPath();
    pincel.moveTo(300,20);
    pincel.lineTo(20,200);
    pincel.lineTo(300,380);
    pincel.lineTo(580, 200)
    pincel.fill();

    pincel.fillStyle = 'blue';
    pincel.beginPath();
    pincel.arc(300,200,140, 0, 2*3.14);

    pincel.fill();

</script>