Entrar Ainda não tem acesso?
1
resposta

Bandeira com losango

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 Eduardo Gomes Sousa
| 44.2k xp | 22 posts
<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.beginPath();
        pincel.moveTo(30,200);
        pincel.lineTo(300,30);
        pincel.lineTo(570,200);     
        pincel.lineTo(300,370);
        pincel.lineTo(30,200);
        pincel.fill();

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

        pincel.fill();


</script>
1 resposta
por Cássio Murilo
| 1276.4k xp | 2204 posts
Instrutor Agile Master

Boa, Eduardo!

Ficou bacana!

Tem uma maneira muito usada onde podemos guardar esses valore em uma variável, partindo da origem do desenho.

    var origemX = 30;
    var origemY = 200;
    var pi = 2 * 3.14;
    var tamanhoCirculo = 120;


        pincel.fillStyle = 'yellow';
        pincel.beginPath();
        pincel.moveTo(origemX,origemY);
        pincel.lineTo(origemX + 270, origemY - 170);
        pincel.lineTo(origemX + 540, origemY);     
        pincel.lineTo(origemX + 270, origemY + 170);
        pincel.lineTo(origemX, origemY);
        pincel.fill();

        pincel.fillStyle = 'blue';
        pincel.beginPath();
        pincel.arc(origemX + 270, origemY, tamanhoCirculo, 0, pi);
 Partimos da origem e adicionamos ou subtraímos sempre a partir da origem. Pode ser que isso traga um sentido de localização para que está desenvolvendo.

Por fim, guardei o tamanho do circulo e o valor de piem uma variável e apliquei dentro do document.write

Espero ter contribuído, Eduardo!

Um abraço!!!