Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Atividade bandeira Brasil => (Tentei fazer uma estrela na bandeira. Ficou um pouco grande!).

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo, no capítulo Desenhando gráficos com Canvas e atividade Ordem e Progresso

por Mizael Ferreira de Oliveira Neto
| 115.6k xp | 34 posts
<canvas width="600" height="400"></canvas>

<script>

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

    pincel.fillStyle = 'green';
    pincel.fillRect(0, 0, 600, 400);


    pincel.fillStyle = 'yellow';
    pincel.beginPath();
    pincel.moveTo(300, 50);
    pincel.lineTo(50, 200);
    pincel.lineTo(550, 200);
    pincel.fill();

    pincel.beginPath();
    pincel.moveTo(300, 350);
    pincel.lineTo(50, 200);
    pincel.lineTo(550, 200);
    pincel.fill();


    pincel.fillStyle = 'darkblue';
    pincel.beginPath();
    pincel.arc(300, 200, 100, 0, 2 * 3.14);
    pincel.fill();


    //estrela;
    pincel.fillStyle = 'white';
    pincel.beginPath();
    pincel.moveTo(300, 200);
    pincel.lineTo(310, 220);
    pincel.lineTo(330, 230);
    pincel.lineTo(310, 240);
    pincel.lineTo(300, 260);
    pincel.lineTo(290, 240);
    pincel.lineTo(270, 230);
    pincel.lineTo(290, 220);
    pincel.lineTo(300, 200)
    pincel.fill();



</script>
3 respostas
solução!
por Francisco Tiago Cipriano de Castro
| 218.9k xp | 150 posts
Desenvolvedor Back End

Vi aqui, muito bom Mizael! Incrementei uma função pra desenhar quantas estrelas forem necessárias! Dá uma olhada, qualquer coisa marca como solucionado!

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

<script>

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

    pincel.fillStyle = 'green';
    pincel.fillRect(0, 0, 600, 400);


    pincel.fillStyle = 'yellow';
    pincel.beginPath();
    pincel.moveTo(300, 50);
    pincel.lineTo(50, 200);
    pincel.lineTo(550, 200);
    pincel.fill();

    pincel.beginPath();
    pincel.moveTo(300, 350);
    pincel.lineTo(50, 200);
    pincel.lineTo(550, 200);
    pincel.fill();


    pincel.fillStyle = 'darkblue';
    pincel.beginPath();
    pincel.arc(300, 200, 100, 0, 2 * 3.14);
    pincel.fill();


  function desenharEstrela(cx, cy, pontas, outerRadius, innerRadius) {
    var rot = Math.PI / 2 * 3;
    var x = cx;
    var y = cy;
    var step = Math.PI / pontas;

    pincel.strokeSyle = "#000";
    pincel.beginPath();
    pincel.moveTo(cx, cy - outerRadius)
    for (i = 0; i < pontas; i++) {
        x = cx + Math.cos(rot) * outerRadius;
        y = cy + Math.sin(rot) * outerRadius;
        pincel.lineTo(x, y)
        rot += step

        x = cx + Math.cos(rot) * innerRadius;
        y = cy + Math.sin(rot) * innerRadius;
        pincel.lineTo(x, y)
        rot += step
    }
    pincel.lineTo(cx, cy - outerRadius)
    pincel.closePath();
    pincel.lineWidth=3;
    pincel.strokeStyle='black';
    pincel.stroke();
    pincel.fillStyle='white';
    pincel.fill();

}

desenharEstrela(260, 160, 5, 30, 15);
desenharEstrela(320, 220, 5, 15, 7.5);

//Mizael, você pode desenhar quantas estrelas quiser, como o exemplo acima, alterando somente a posição e a razão para mudar o tamanho!


</script>

Valeu!

por Estudante
| 123.5k xp | 2 posts
<canvas width="600" height="400"></canvas>

<script>

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

    pincel.fillStyle = 'green';
    pincel.fillRect(0, 0, 600, 400);


    pincel.fillStyle = 'yellow';
    pincel.beginPath();
    pincel.moveTo(300, 50);
    pincel.lineTo(50, 200);
    pincel.lineTo(550, 200);
    pincel.fill();

    pincel.beginPath();
    pincel.moveTo(300, 350);
    pincel.lineTo(50, 200);
    pincel.lineTo(550, 200);
    pincel.fill();


    pincel.fillStyle = 'darkblue';
    pincel.beginPath();
    pincel.arc(300, 200, 100, 0, 2 * 3.14);
    pincel.fill();


  function desenharEstrela(cx, cy, pontas, outerRadius, innerRadius) {
    var rot = Math.PI / 2 * 3;
    var x = cx;
    var y = cy;
    var step = Math.PI / pontas;

    pincel.strokeSyle = "#000";
    pincel.beginPath();
    pincel.moveTo(cx, cy - outerRadius)
    for (i = 0; i < pontas; i++) {
        x = cx + Math.cos(rot) * outerRadius;
        y = cy + Math.sin(rot) * outerRadius;
        pincel.lineTo(x, y)
        rot += step

        x = cx + Math.cos(rot) * innerRadius;
        y = cy + Math.sin(rot) * innerRadius;
        pincel.lineTo(x, y)
        rot += step
    }
    pincel.lineTo(cx, cy - outerRadius)
    pincel.closePath();
    pincel.lineWidth=3;
    pincel.strokeStyle='black';
    pincel.stroke();
    pincel.fillStyle='white';
    pincel.fill();

}

desenharEstrela(260, 160, 5, 30, 15);
desenharEstrela(320, 220, 5, 15, 7.5);

//Mizael, você pode desenhar quantas estrelas quiser, como o exemplo acima, alterando somente a posição e a razão para mudar o tamanho!


</script>
por Estudante
| 123.5k xp | 2 posts
Não entendi