1
resposta

[HTML & JS] Bandeira LGBT codificada LOL

o desafio de fazer a bandeira do brasil nao foi suficiente, entao fiz a bandeira LGBT XD

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

<canvas width="1000" height="600"></canvas>
<script>
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

    pincel.fillStyle='#e21f16';
    pincel.fillRect(0, 0, 1000, 100);

    pincel.fillStyle='#f18916';
    pincel.fillRect(0, 100, 1000, 100)

    pincel.fillStyle='#eee524';
    pincel.fillRect(0, 200, 1000, 100);

    pincel.fillStyle='#78b82a';
    pincel.fillRect(0, 300, 1000, 100);

    pincel.fillStyle='#2d5aa6';
    pincel.fillRect(0, 400, 1000, 100);

    pincel.fillStyle='#6e2481';
    pincel.fillRect(0, 500, 1000, 100);

    pincel.fillStyle='black';
    pincel.beginPath();
    pincel.moveTo(250, 0);
    pincel.lineTo(500, 300);
    pincel.lineTo(250, 600);
    pincel.lineTo(200, 600);
    pincel.lineTo(450, 300);
    pincel.lineTo(200, 0);
    pincel.fill();
    
    pincel.fillStyle="#955416";
    pincel.beginPath();
    pincel.moveTo(200, 0);
    pincel.lineTo(450, 300);
    pincel.lineTo(200, 600);
    pincel.lineTo(150, 600);
    pincel.lineTo(400, 300);
    pincel.lineTo(150, 0);
    pincel.fill();

    pincel.fillStyle='#7acde5';
    pincel.beginPath();
    pincel.moveTo(150, 0);
    pincel.lineTo(400, 300);
    pincel.lineTo(150, 600);
    pincel.lineTo(100, 600);
    pincel.lineTo(350, 300);
    pincel.lineTo(100, 0);
    pincel.fill();

    pincel.fillStyle='#f4aec8';
    pincel.beginPath();
    pincel.moveTo(100, 0);
    pincel.lineTo(350, 300);
    pincel.lineTo(100, 600);
    pincel.lineTo(50, 600);
    pincel.lineTo(300, 300);
    pincel.lineTo(50, 0);
    pincel.fill();

    pincel.fillStyle='#ffffff';
    pincel.beginPath();
    pincel.moveTo(50, 0);
    pincel.lineTo(300, 300);
    pincel.lineTo(50, 600);
    pincel.lineTo(0, 600);
    pincel.lineTo(250, 300);
    pincel.lineTo(0, 0);
    pincel.fill();

    pincel.fillStyle='#fdd815';
    pincel.beginPath();
    pincel.moveTo(0, 0);
    pincel.lineTo(250, 300);
    pincel.lineTo(0, 600);
    pincel.fill();

    pincel.strokeStyle = "#65338a"; 
    pincel.lineWidth = 15; 
    pincel.beginPath();
    pincel.arc(100, 300, 70, 0, 2*Math.PI);
    pincel.stroke();
</script>
1 resposta

Olá Luciana! Tudo bem?

Você fez um trabalho incrível ao criar uma representação da bandeira LGBT no canvas!

E pelo que posso ver no código e na imagem, você utilizou a técnica de desenho com retângulos para criar as faixas coloridas da bandeira e formas geométricas para adicionar detalhes adicionais.

Se você tiver alguma dúvida específica sobre o código, como otimizar, adicionar interatividade ou qualquer outra coisa relacionada, sinta-se à vontade para perguntar. Seu trabalho está visualmente impactante e é um ótimo exemplo de como usar programação para criar arte e expressão visual!

Grande abraço e bons estudos!