4
respostas

como faço para desenhar dois trapézios verticais em html ?

tentei desenhar o triangulo primeiro os triângulos e depois os retângulos mas não deu certo

4 respostas

Olá, Laissa! Tudo bem contigo?

Desculpe a demora em dar um retorno!

Fiz uma prévia de um retângulo e acredito que vai te ajudar a chegar no resultado que deseja!

Veja abaixo:

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

<script>

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

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

    pincel.fillStyle='orange';
    pincel.beginPath();
    pincel.moveTo(200, 100);
    pincel.lineTo(100, 300);
    pincel.lineTo(500, 300);
    pincel.lineTo(400, 100);
    pincel.fill();    

</script>

Essa imagem abaixo pode te auxiliar também

Canvas

Qualquer dúvida nos procure!

Um abraço e bons estudos

como faço para colocar esse trapézio na vertical?

Opa, Laissa!

Segue abaixo:

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

<script>

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

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

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

</script>

Espero ter ajudado!

Qualquer dúvida nos procure

Um abraço ;-)

obrigada