1
resposta

Bandeira França e Alemanha

Antes de qualquer coisa, o estilo de ambos esta no css externo e é: canvas{ width: 600px; height: 400px; border: 1px solid black; border-radius: 20px; }

Bandeira França:

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Primeira obra de arte - França</title>

        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <a href="primeiras_obras_Franca.html">França</a><br>
        <a href="primeiras_obras_Alemanha.html">Alemanha</a>
        <canvas>

        </canvas>

        <script>
            var desenho = document.querySelector("canvas")
            var pincel =  desenho.getContext('2d')

            pincel.fillStyle = 'darkblue'
            pincel.fillRect(0,0, 100,400);

            pincel.fillStyle = 'white'
            pincel.fillRect(100,0, 100,400);

            pincel.fillStyle = 'red'
            pincel.fillRect(200,0, 100,400);
        </script>

    </body>
</html>

Bandeira Alemanha:

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Primeira obra de arte - Alemanha</title>

        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <a href="primeiras_obras_Franca.html">França</a><br>
        <a href="primeiras_obras_Alemanha.html">Alemanha</a>
        <canvas>

        </canvas>

        <script>
            var desenho = document.querySelector("canvas")
            var pincel =  desenho.getContext('2d')

            pincel.fillStyle = 'black'
            pincel.fillRect(0,0, 600,50);

            pincel.fillStyle = 'darkred'
            pincel.fillRect(0,50, 600,50);

            pincel.fillStyle = 'yellow'
            pincel.fillRect(0,100, 600,50);
        </script>

    </body>
</html>
1 resposta

Oi Gustavo

Muito bom o exercício com as bandeiras!

Parabéns pelo empenho nos estudos!

Continue praticando e qualquer dúvida pode contar com a gente.