1
resposta

Bandeira do Brasil

Acho que deu certo.

bandeira_Brasil

<canvas width="1000" height="800"> </canvas>

<script>

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

    //retangulo
    pincel.fillStyle = 'darkgreen';
    pincel.fillRect(100, 100, 600, 420);
    pincel.strokeRect(100, 100, 600, 420);

    //losango
    pincel.fillStyle = 'yellow';
    pincel.beginPath();
    pincel.moveTo(400, 150);
    pincel.lineTo(150, 310);
    pincel.lineTo(400, 470);
    pincel.lineTo(650, 310);
    pincel.fill();    
    pincel.moveTo(400, 150);
    pincel.lineTo(650, 310);
    pincel.stroke();


    //circulo
    pincel.fillStyle = 'darkblue';
    pincel.beginPath();
    pincel.arc(400, 310, 110, 0, 2 * 3.14);
    pincel.fill();
    pincel.stroke()

    //faixa branca
    pincel.fillStyle = 'white';
    pincel.beginPath();
    pincel.moveTo(295,264);
    pincel.bezierCurveTo(380,245,450,240,511,300);
    pincel.fill();

    pincel.fillStyle = 'white';
    pincel.beginPath();
    pincel.moveTo(298, 264);
    pincel.lineTo(511, 299);
    pincel.lineTo(511, 320);
    pincel.lineTo(291, 285)
    pincel.fill();

    pincel.fillStyle = 'darkblue';
    pincel.beginPath();
    pincel.moveTo(290,286);
    pincel.bezierCurveTo(380,265,450,263,510,321);
    pincel.fill();

    pincel.save();

    //frase  
    pincel.rotate((Math.PI / 180) * -8);
    pincel.fillStyle = 'darkgreen';
    pincel.font = "14px Verdana, Arial, Helvetica, sans-serif";
      pincel.fillText("O R D E M", 256, 317);

      pincel.rotate((Math.PI / 180) * 8);
    pincel.fillStyle = 'darkgreen';
    pincel.font = "14px Verdana, Arial, Helvetica, sans-serif";
      pincel.fillText(" E ", 373, 267);

      pincel.rotate((Math.PI / 180) * 6);
    pincel.fillStyle = 'darkgreen';
    pincel.font = "14px Verdana, Arial, Helvetica, sans-serif";
      pincel.fillText("P R", 420, 224);

      pincel.rotate((Math.PI / 180) * 7);
    pincel.fillStyle = 'darkgreen';
    pincel.font = "14px Verdana, Arial, Helvetica, sans-serif";
      pincel.fillText(" O G", 465, 168);

      pincel.rotate((Math.PI / 180) * 14);
    pincel.fillStyle = 'darkgreen';
    pincel.font = "14px Verdana, Arial, Helvetica, sans-serif";
      pincel.fillText("R E S ", 526, 42);

      pincel.rotate((Math.PI / 180) * 13);
    pincel.fillStyle = 'darkgreen';
    pincel.font = "14px Verdana, Arial, Helvetica, sans-serif";
      pincel.fillText(" S O", 557, -86);

      //estrelas
      pincel.restore();

    function estrelaG (x, y) {

        pincel.fillStyle = 'white';
        pincel.beginPath();
        pincel.moveTo(x, y);
        pincel.lineTo(x - 3, y + 9);
        pincel.lineTo(x + 3, y + 9);
        pincel.moveTo(x + 3, y + 9);
        pincel.lineTo(x - 3, y + 9);
        pincel.lineTo(x, y + 6);
        pincel.fill();
        pincel.moveTo(x, y + 6);
        pincel.lineTo(x - 5, y + 3.5);
        pincel.lineTo(x + 5, y + 3.5);
        pincel.fill();
    }

    function estrelaP (x, y) {

        pincel.fillStyle = 'white';
        pincel.beginPath();
        pincel.moveTo(x, y - 0.5);
        pincel.lineTo(x - 2.3, y + 7);
        pincel.lineTo(x + 2.3, y + 7);
        pincel.fill();        
        pincel.moveTo(x, y + 4);
        pincel.lineTo(x - 3.7, y + 1.5);
        pincel.lineTo(x + 3.7, y + 1.5);
        pincel.fill();
        pincel.fillStyle = 'darkblue';
        pincel.moveTo(x, y + 7);
        pincel.lineTo(x - 1, y + 7);
        pincel.lineTo(x + 1, y + 7);
        pincel.fill();
    }


    estrelaG (450, 245);
    estrelaG (315, 287);
    estrelaG (485, 330);
    estrelaG (405, 365);
    estrelaG (355, 373);
    estrelaG (322, 337);
    estrelaG (310, 348);
    estrelaG (405, 327);
    estrelaG (422, 338);
    estrelaG (387, 338);
    estrelaG (362, 313);
    estrelaG (345, 350);
    estrelaG (493, 342);
    estrelaG (482, 352);
    estrelaG (458, 370);
    estrelaG (435, 375);

    estrelaP (435, 285);
    estrelaP (398, 350);
    estrelaP (334, 328);
    estrelaP (339, 360);
    estrelaP (405, 397);
    estrelaP (500, 333);
    estrelaP (470, 360);
    estrelaP (458, 360);
    estrelaP (458, 383);
    estrelaP (430, 360);
    estrelaP (445, 365);

</script>
1 resposta

Olá, Ruan! Tudo bem?

Mandou muito bem!

Sua solução ficou excelente, parabéns!

Caso tenha ficado com alguma dúvida não deixe de compartilhar com a gente.

Bons estudos e até mais!