Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se

Lógica de programação II, aula 2, atividade 5 - exercício da flor: minha resposta

Caros Colegas,

Eis a minha resposta para o exercício da flor:

flor.html

<canvas id="tela" width="600" height="400"></canvas>
<script type="text/javascript">
    var tela = document.querySelector("#tela");
    var pincel = tela.getContext("2d");

    pincel.fillStyle = "lightgray";
    pincel.fillRect(0, 0, 600, 400);

    function desenharCirculo(x, y, raio, cor) {
        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2*3.14);
        pincel.fill();
    }

    desenharCirculo(300, 200, 40, "red");
    desenharCirculo(300, 120, 40, "yellow");
    desenharCirculo(300, 280, 40, "blue");
    desenharCirculo(220, 200, 40, "orange");
    desenharCirculo(380, 200, 40, "black");
</script>

Tomei a liberdade de alterar o código proposto no exercício, para ter alguma interatividade.

Eis o código:

flor0.html

<!DOCTYPE html>
<html lang="pt-br" dir="ltr">
    <head>
        <meta charset="utf-8" />
        <title>mosaico de flores</title>
    </head>
    <body>
        <h1>mosaico de flores</h1>
        <form id="especificar_flores">
            <label for="tamanho_flor">Qual é o tamanho da flor?</label>
            <input type="text" name="tamanho_flor" value=""> <br />
            <label for="quantidade_flores">Quantas flores?</label>
            <input type="text" name="quantidade_flores" value=""> <br />

            <button type="button" name="desenhar_flores">desenhar</button>
            <p></p>
        </form>

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

        <script type="text/javascript">
            var tela = document.querySelector("#tela");
            var pincel = tela.getContext("2d");

            function desenharCirculo(x, y, raio, cor) {
                pincel.fillStyle = cor;
                pincel.beginPath();
                pincel.arc(x, y, raio, 0, 2*3.14);
                pincel.fill();
            }

            function desenharFlor(tamanho_flor) {
                var tamanho_flor = document.forms["especificar_flores"]["tamanho_flor"].value;
                var raio = tamanho_flor / 6;
                var x_centro = Math.floor((Math.random() * 600) + 1);
                var y_centro = Math.floor((Math.random() * 400) + 1);
                var desloca_circulo = raio * 2;
                desenharCirculo(x_centro, y_centro, raio, "red");
                desenharCirculo(x_centro, y_centro - desloca_circulo, raio, "yellow");
                desenharCirculo(x_centro, y_centro + desloca_circulo, raio, "blue");
                desenharCirculo(x_centro - desloca_circulo, y_centro, raio, "orange");
                desenharCirculo(x_centro + desloca_circulo, y_centro, raio, "black");
            }

            function multiplicarFlores(quantidade_flores) {
                var quantidade_flores = document.forms["especificar_flores"]["quantidade_flores"].value;
                for (var i = 0; i < quantidade_flores; i++ ) {
                    desenharFlor();
                }
            }

            var flores = document.querySelector("form#especificar_flores button[name='desenhar_flores']");
            flores.onclick = multiplicarFlores;
        </script>
    </body>
</html>

Grato pela atenção,

Dinaldo R. Trindade Jr.

Brasília/DF

3 respostas

Oi, Dinaldo, tudo bem?

Parabéns pelo seu código! Ficou muito legal e deu pra perceber que você estudou para colocar em prática a sua ideia!

Bons estudos :}

Boa tarde, Dinaldo! Como vai?

Muito bem, é isso aí! Praticar tornando os exemplos um pouco mais complexos é uma excelente forma de aprender e consolidar o conhecimento adquirido! Continue assim!

Grande abraço e bons estudos, meu aluno!

Dinaldo, eu também fiz umas mudanças no exercício. saca só

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Flor</title>
    <style>
        body{
            background: rgb(70, 142, 236);
            font: normal 15pt Arial;
        }
        header{
            color: white;
            text-align: center;
        }
        section{
            background: white;
            border-radius: 10px;
            padding: 30px;
            width: 700px;
            height: 500px;
            margin: auto;
            box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.363);
        }
        footer{
            color: white;
            text-align: center;
            font-style: italic;
        }
        canvas {
            padding-left: 0;
            padding-right: 0;
            margin-left: auto;
            margin-right: auto;
            margin-top: 50px;
            display: block;
            width: 600px;
        }
    </style>
</head>
<body>
    <header>
        <h1>Flor</h1>
    </header>
    <section>
        <canvas width = "600px" height="400px"></canvas>
        <script>
            let tela = document.querySelector('canvas')
            let pincel = tela.getContext('2d')
            pincel.fillStyle = 'lightgray';
            pincel.fillRect(0, 0, 600, 400);

            function desenhaCirculo(x, y, raio, cor) {
                pincel.fillStyle = cor;
                pincel.beginPath();
                pincel.arc(x, y, raio, 0, 2*3.14);
                pincel.fill();
            }
            desenhaCirculo(322, 182, 30, 'violet')
            desenhaCirculo(322, 182, 25, 'Orchid')
            desenhaCirculo(322, 222, 30, 'violet')            
            desenhaCirculo(322, 222, 25, 'Orchid')
            desenhaCirculo(278, 222, 30, 'violet')
            desenhaCirculo(278, 222, 25, 'Orchid')
            desenhaCirculo(278, 182, 30, 'violet')
            desenhaCirculo(278, 182, 25, 'Orchid')

            desenhaCirculo(265, 200, 25, 'violet')
            desenhaCirculo(280, 200, 20, 'orchid')
            desenhaCirculo(290, 200, 15, 'violet')

            desenhaCirculo(335, 200, 25, 'violet')
            desenhaCirculo(320, 200, 20, 'orchid')
            desenhaCirculo(315, 200, 15, 'violet')

            desenhaCirculo(300, 165, 25, 'violet')
            desenhaCirculo(300, 180, 20, 'orchid')
            desenhaCirculo(300, 190, 15, 'violet')

            desenhaCirculo(300, 235, 25, 'violet')
            desenhaCirculo(300, 220, 20, 'orchid')
            desenhaCirculo(300, 210, 15, 'violet')


            desenhaCirculo(300, 200, 15, 'yellow')
            desenhaCirculo(300, 200, 12.5, 'orange')
            desenhaCirculo(300, 200, 10, 'yellow')
            desenhaCirculo(300, 200, 7.5, 'orange')
            desenhaCirculo(300, 200, 5, 'yellow')
            desenhaCirculo(300, 200, 2.5, 'orange')
            desenhaCirculo(300, 200, 1, 'yellow')
        </script>
        </script>
        </script>
    </section>
    <footer>
        <p>&copy; LucasCorte</p>
    </footer>
</body>
</html>