Uma inofensiva flor - Escolha onde a flor aparece. | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

2
respostas

por Vinicius Souto Quixabeira

| 125.1k xp | 7 posts

Fiz o exercício de uma forma que basta chamar a função "paintFlower" e passar a posição central e o tamanho para cria-la por completo.

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

<script>

    var tela = document.querySelector('canvas');
    var 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();
    }

    function paintFlower(centerx, centery, tam) {
        desenhaCirculo(centerx, centery, tam, 'red');
        desenhaCirculo(centerx, (centery + (2 * tam)), tam, 'blue');
        desenhaCirculo(centerx, (centery - (2 * tam)), tam, 'yellow');
        desenhaCirculo((centerx - (2 * tam)), centery, tam, 'orange');
        desenhaCirculo((centerx + (2 * tam)), centery, tam, 'black');
    }

    paintFlower(300, 200, 10)

</script>

2 respostas

por Laís Cavalcanti

| 2576.8k xp | 4815 posts

Instrutor

12/12/2019

Oi, Victor, tudo bem?

Muito boa a solução! Testei e a flor aparece normalmente.

Bons estudos e parabéns!

por Alba Lucia Araujo de Campos

| 40.2k xp | 8 posts

18/12/2019

Olá! Fiz algo parecido, mas usando a mesma função desenhaFlor. Achei muito legal esse jeito de desenhar usando código!

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

<script>
    var tela = document.querySelector ('canvas');
    var 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();
    }

    function desenhaFlor (x, y, raio){
        desenhaCirculo(x, y, raio, 'red');
        desenhaCirculo (x, y-raio*2, raio, 'yellow');
        desenhaCirculo (x, y+raio*2, raio, 'blue');
        desenhaCirculo (x-raio*2, y, raio, 'orange');
        desenhaCirculo (x+raio*2, y, raio, 'black');
    }

    desenhaFlor (300, 200, 5);
    desenhaFlor (100, 100, 10);
    desenhaFlor (550, 300, 15);


</script>