1
resposta

bandeira implementando funções para as figuras geometricas

acho que fica mais prático e reaproveitamos codigo

<h1>Bandeira</h1>
<canvas id="tela" width="800" height="600">

</canvas>

<script type="text/javascript">
    function retangulo(ferramenta,x, y, larg, alt, cor) {
        ferramenta.fillStyle = cor;
        ferramenta.fillRect(x,y,larg,alt);
    }

    function triRetangulo(ferramenta,xInicial,yInicial,base,altura,cor){ferramenta.fillStyle = cor;
        ferramenta.beginPath();
        ferramenta.moveTo(xInicial, yInicial);
        ferramenta.lineTo(xInicial + base, yInicial + altura);
        ferramenta.lineTo(xInicial, yInicial + altura);
        ferramenta.fill();
    }

    function triangulo(ferramenta,xInicial,yInicial,base,altura,cor){ferramenta.fillStyle = cor;
        ferramenta.beginPath();
        ferramenta.moveTo(xInicial, yInicial);
        ferramenta.lineTo(xInicial + base / 2, yInicial + altura);
        ferramenta.lineTo(xInicial - base / 2, yInicial + altura);
        ferramenta.fill();
    } 

    function trianguloInvertido(ferramenta,xInicial,yInicial,base,altura,cor){ferramenta.fillStyle = cor;
        ferramenta.beginPath();
        ferramenta.moveTo(xInicial, yInicial);
        ferramenta.lineTo(xInicial + base / 2, yInicial - altura);
        ferramenta.lineTo(xInicial - base / 2, yInicial - altura);
        ferramenta.fill();
    }

    function losangulo(ferramenta,xInicial,yInicial,larg,altura,cor){
        triangulo(ferramenta, xInicial ,yInicial ,larg, altura / 2, "yellow")
        trianguloInvertido(ferramenta,xInicial,yInicial + altura,larg ,altura / 2,"yellow")
    }

    function circulo(ferramenta, xInicial, yInicial, raio, cor){
        ferramenta.fillStyle = cor;
        ferramenta.beginPath();
        ferramenta.arc(xInicial, yInicial, raio, 0, 2 * 3.14);
        ferramenta.fill();
    }

    var tela = document.getElementById('tela');
    var lapis = tela.getContext('2d');

    retangulo(lapis,0,0,500,300,"green");
    losangulo(lapis, 230,50,400,200,"magenta");
    circulo(lapis,230,150,80,"blue");
</script>
1 resposta

Boa, Arthur! Mandou muito bem!

Usar funções é tornar seu código muito mais dinâmico e de pouca manutenção!!!

É isso aí!

Um abraço e bons estudos