1
resposta

Duplicando objeto no canvas. Travei na Function!

Olá!

Quem consegue me ajudar a duplicar essa estrela. Não consegui sair da function! Segue o código...

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

    <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);

        pincel.fillStyle = '#ffffff';
        pincel.fillRect(0, 0, 600, 42);

        pincel.fillStyle = '#ffffff';
        pincel.fillRect(0, 84, 600, 42);

        pincel.fillStyle = '#ffffff';
        pincel.fillRect(0, 168, 600, 42);

        pincel.fillStyle = '#ffffff';
        pincel.fillRect(0, 252, 600, 42);

        pincel.fillStyle = '#ffffff';
        pincel.fillRect(0, 336, 600, 42);

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


        function desenhaEstrela(x, y, cor) {
            pincel.fillStyle = '#ffffff';
            pincel.beginPath();
            pincel.moveTo(125, 105);
            pincel.lineTo(135, 80);
            pincel.lineTo(143, 105);
            pincel.fill();

            pincel.fillStyle = '#ffffff';
            pincel.beginPath();
            pincel.moveTo(155, 140);
            pincel.lineTo(105, 105);
            pincel.lineTo(143, 105);
            pincel.fill();

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

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

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

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

        desenhaEstrelaInteira();




    </script>
1 resposta

Opa,

Acho que faltou passar os parâmetros para o desenhaEstrela(x, y, cor), dentro do desenhaEstrelaInteira.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software