Entrar Ainda não tem acesso?
4
respostas

Bandeira Brasil

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 Wellington Batista De Oliveira
| 40.8k xp | 69 posts

Sofri mais saiu. As coordenadas não ficaram idênticas ao do professor, mais ficou legal.

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

<meta charset="UTF-8">

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

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


    pincel.fillStyle = 'yellow';
    pincel.beginPath();
    pincel.moveTo(300, 40); // inicia no meio da tela 
    pincel.lineTo(50, 200); // 
    pincel.lineTo(550, 200);
    pincel.fill();

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


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


    </script>
4 respostas
por Guilherme Henrique
| 733.8k xp | 2109 posts
Instrutor

Oi Wellington

Muito bom! Parabéns pelo empenho nos estudos!

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

por Lucas Luz De Jesus
| 34.8k xp | 10 posts
Auxiliar de loja

Fiz um código mais otimizado :)

em vez de criar dois triângulos, eu criei um losango!

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

<script>
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

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

    // Losango amarelo
    pincel.fillStyle = 'yellow';
    pincel.beginPath();
    pincel.moveTo(0, 200);
    pincel.lineTo(300, 0);
    pincel.lineTo(600, 200);
    pincel.lineTo(300, 400);
    pincel.fill();

    // Circulo azul escuro
    pincel.fillStyle = 'darkblue';
    pincel.beginPath();
    pincel.arc(300, 200, 100, 0, 6.28);
    pincel.fill();
</script>
por Guilherme Henrique
| 733.8k xp | 2109 posts
Instrutor

Isso ai Lucas, muito bom!

Qualquer dúvida pode contar com a gente.

por Ricardo Bruno Marques Alves
| 35.6k xp | 11 posts

Apanhei demais pq primeiro tem que por parâmetro para vc ver a forma geométrica e depois usando muito do 'feeling' para ajustar hahaha

segue:

<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);

    pincel.fillStyle='yellow';
    pincel.moveTo(300, 0);
    pincel.lineTo(0, 200);
    pincel.lineTo(600,200);
    pincel.fill();

    pincel.fillStyle='yellow';
    pincel.moveTo(300, 400);
    pincel.lineTo(0, 200);
    pincel.lineTo(600,200);
    pincel.fill();

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


</script>