2
respostas

Canvas: Como duplicar objeto(estrela) sem ficar por cima do anterior.

<script>

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

    pincel.fillStyle = '#c43131';
    pincel.fillRect(0, 0, 600, 420);
    pincel.strokeStyle = 'black';
    pincel.strokeRect(0, 0, 600, 420);

    for (y = 0; y < 420; y = y + 84) {
        pincel.fillStyle = '#ffffff';
        pincel.fillRect(0, y, 600, 42);
    }

    pincel.fillStyle = '#0098DA'; //quadrado azul
    pincel.fillRect(0, 0, 270, 210);

    function desenhaEstrela(x, y) {
        function desenhaQuadrado(x, y) {
            pincel.fillStyle = '#ffffff';
            pincel.fillRect(x, y, 5, 5);
            pincel.fill();
        }

        desenhaQuadrado(125, 105);

        pincel.fillStyle = '#ffffff';
        pincel.beginPath();
        pincel.moveTo(125, 105);
        pincel.lineTo(130, 95);
        pincel.lineTo(135, 105);
        pincel.fill();

        pincel.fillStyle = '#ffffff';
        pincel.beginPath();
        pincel.moveTo(115, 105);
        pincel.lineTo(125, 105);
        pincel.lineTo(125, 115);
        pincel.fill();

        pincel.fillStyle = '#ffffff';
        pincel.beginPath();
        pincel.moveTo(145, 105);
        pincel.lineTo(135, 105);
        pincel.lineTo(135, 115);
        pincel.fill();

        pincel.fillStyle = '#ffffff';
        pincel.beginPath();
        pincel.moveTo(119, 122);
        pincel.lineTo(130, 95);
        pincel.lineTo(137, 110);
        pincel.fill();

        pincel.fillStyle = '#ffffff';
        pincel.beginPath();
        pincel.moveTo(140, 122);
        pincel.lineTo(130, 95);
        pincel.lineTo(122, 110);
        pincel.fill();
    }

    desenhaEstrela();
    desenhaEstrela();

</script>
2 respostas

Boa noite, Douglas! Como vai?

Elas estão ficando sobrepostas pois tem as mesmas coordenadas. Para isso, vc terá que tornar essas coordenadas do desenho diferentes.

Pegou a ideia? Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!

Olá!

Fiz isso usando uma outra função mais não deu certo.

function desenhaEstrelaInteira(x, y) { desenhaEstrela() }

       desenhaEstrelaInteira(50, 10);