Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

duvida com a bandeira do 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 Erick Lima Cândido
| 18.5k xp | 6 posts
<canvas width="600" height="400" ></canvas>

<script>

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

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

    pincel.fillStyle = "darkgreen";
    pincel.fillRect(0,0,400,300);


    pincel.fillStyle = 'yellow';
    pincel.beginPath();
    pincel.moveTo(200,50);
    pincel.lineTo(50,150);
    pincel.lineTo(350,150);
    pincel.fill();

    pincel.fillStyle = 'yellow';
    pincel.beginPath();
    pincel.moveTo(200,250);
    pincel.lineTo(50,150);
    pincel.lineTo(350,150);
    pincel.fill();

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



</script>

` gostaria de uma explicaçao para entender como deixar o mais linear possivel ,e se possivel sobre como funciona a construçao do triangulo ,conheco a teoria mas nao consigo colocar em pratica,acho que entendi a logica gostaria apena de um okay do codigo ,

1 resposta
solução!
por Maison Galvão
| 1029.2k xp | 1128 posts
Moderador Desenvolvedor de Sistemas 
//Declarando a área do canvas
<canvas width="600" height="400"></canvas>

//Inciando o código javascript
<script>
atribuindo o canvas a variável tela.
  var tela = document.querySelector("canvas");
//Declarando uma variavel pincel
  var pincel = tela.getContext("2d");
//Definindo o verde
  pincel.fillStyle = "green";
//Pintando todo a tela de verde
  pincel.fillRect(0,0,600,400);
//Definindo a cor amarelo
  pincel.fillStyle = "yellow"
//Iniciando um novo ponto de pintura
  pincel.beginPath();
// bem no centro um pouco abaixo
  pincel.moveTo(300,50);
//Deslocando para a esquerda fazendo a primeira parte do losango
  pincel.lineTo(50,200);
//Deslocando para baixo até aqui já temos duas partes de quatro do losango
  pincel.lineTo(300,350);
//Deslocando para a direita e para o meio aqui ja temos tres partes de quatro
  pincel.lineTo(550,200);
//Como so falta uma parte para retorna para o meu ponto inicial eu  completo com fill
  pincel.fill();
//Selecionando a cor azul
  pincel.fillStyle = "blue";
//Definindo um novo caminho
  pincel.beginPath();
//Desenhando um círculo
  pincel.arc(300,200,100, 0,2*3.14);
  pincel.fill();
//Defininfo a cor branca
  pincel.fillStyle = "white";
//Setando um novo caminho
  pincel.beginPath();
  pincel.moveTo(200,190);
  pincel.lineTo(200,220);
  pincel.lineTo(400,230);
  pincel.lineTo(400,200);
  pincel.fill();
</script>

Escolhi ajudar atraves dos comentários, no código dei uma reforçada na parte do triangulo.

Espero ter ajudado e bons estudos