Se caso eu quiser colocar outro triangulo de cima para baxio como seria o codigo?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Se caso eu quiser colocar outro triangulo de cima para baxio como seria o codigo?
Olá, Vinícius! Como vai?
Para criar outro triângulo nesse desenho, você deve inserir esse código ao código da aula:
// Define a cor de preenchimento como amarelo
pincel.fillStyle = 'yellow';
// Inicia um novo caminho de desenho
pincel.beginPath();
// Move o "pincel" para o ponto (300, 200)
pincel.moveTo(300, 200);
// Desenha uma linha do ponto atual para o ponto (200, 0)
pincel.lineTo(200, 0);
// Desenha outra linha do ponto atual para o ponto (400, 0)
pincel.lineTo(400, 0);
// Preenche a forma criada com a cor definida anteriormente (amarelo)
pincel.fill();
Com isso, o seu código completo deve ser esse:
<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'lightgrey';
pincel.fillRect(0, 0, 600, 400);
pincel.fillStyle = 'green';
pincel.fillRect(0, 0, 200, 400);
pincel.fillStyle = 'red';
pincel.fillRect(400, 0, 200, 400);
pincel.fillStyle = 'yellow';
pincel.beginPath();
pincel.moveTo(300, 200);
pincel.lineTo(200, 400);
pincel.lineTo(400, 400);
pincel.fill();
//Código inserido
pincel.fillStyle = 'yellow';
pincel.beginPath();
pincel.moveTo(300, 200);
pincel.lineTo(200, 0);
pincel.lineTo(400, 0);
pincel.fill();
pincel.fillStyle = 'blue';
pincel.beginPath();
pincel.arc(300, 200, 50, 0, 2 * 3.14);
pincel.fill();
</script>
Espero que isso ajude. Fico à disposição!
Abraço!