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

Não estava entendendo porque não saia a bola zul

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 Rafael Guilherme Borges
| 49.2k xp | 6 posts

escrevi meu código deste jeito

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

<script>

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


    pincel.fillStyle="darkblue";
    pincel.beginPath();
    pincel.arc(325, 225, 100, 0, 2*3.14);
    pincel.fill();

    pincel.fillStyle = 'green';
    pincel.beginPath();
    pincel.moveTo(50, 50);
    pincel.lineTo(50, 600);
    pincel.lineTo(1600, 50);
    pincel.fill();

    pincel.fillStyle = 'yellow';
    pincel.beginPath();
    pincel.moveTo(75, 225);
    pincel.lineTo(325, 375);
    pincel.lineTo(575, 225);
    pincel.fill();

    pincel.fillStyle = 'yellow';
    pincel.beginPath();
    pincel.moveTo(75, 225);
    pincel.lineTo(575, 225);
    pincel.lineTo(325, 75);
    pincel.fill();

</script>

porem existe uma ordem! tem algum código que possamos usar para chamar a cor para sima como se usa no Illustrator? depois de muito trabalho deu certo!

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

<script>

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

    pincel.fillStyle = 'green';
    pincel.beginPath();
    pincel.moveTo(50, 50);
    pincel.lineTo(50, 600);
    pincel.lineTo(1600, 50);
    pincel.fill();

    pincel.fillStyle = 'yellow';
    pincel.beginPath();
    pincel.moveTo(75, 225);
    pincel.lineTo(325, 375);
    pincel.lineTo(575, 225);
    pincel.fill();

    pincel.fillStyle = 'yellow';
    pincel.beginPath();
    pincel.moveTo(75, 225);
    pincel.lineTo(575, 225);
    pincel.lineTo(325, 75);
    pincel.fill();

       pincel.fillStyle="darkblue";
    pincel.beginPath();
    pincel.arc(325, 225, 100, 0, 2*3.14);
    pincel.fill();

</script>
2 respostas
solução!
por Maison Galvão
| 1029.2k xp | 1128 posts
Moderador Desenvolvedor de Sistemas

Oi Rafael javascript vai processando as instruções de cima para baixo e da esquerda para a direita, se você declarar o azul antes do verde o que vai acontecer é que o verde irá sobrepor o azul e este último não ficará visível. Logo a ordem é importante. Que bom que você conseguiu identificar. Caso persista alguma dúvida a respeito desse exercício pode perguntar aqui mesmo ou se você não tiver mais nenhuma dúvida a respeito você pode marcar uma resposta como solução, finalizando assim esse tópico.Espero ter ajudado. Bons estudos.

por Gleilson
| 161.3k xp | 56 posts

Que bom que você identificou o erro! Isso é um bom sinal. A figura amarela que representa o losango eu fiz desse jeito (um único objeto).

<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,40);
        pincel.lineTo(40,200);
        pincel.lineTo(300,360);
        pincel.lineTo(560,200);
        pincel.fill();

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