2
respostas

Por quê está dando errado?

Hoje fui fazer a atividade da aula: Logica de programação 2:pratique com desenhos, animações e um jogo. E tentei resolver a atividade mas não sei o que há de errado com meu 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 * Math.PI);
        pincel.fill();
    }

    function limpaTela() {

        pincel.clearRect(0, 0, 600, 400);
    }
    var tamanhoMinimo = 20;
    var tamanhoMaximo = 30;
    var aumenta = 1;
    function pulsaCirculo(){

        if(tamanhoMinimo > tamanhoMaximo){
            aumenta = -1;

        }else if(tamanhoMinimo < tamanhoMaximo){
            aumenta = 1;
        }

        desenhaCirculo(20,20,tamanhoMinimo);
        tamanhoMinimo = tamanhoMinimo + aumenta;

    }
    setInterval(pulsaCirculo, 20);

</script>
2 respostas

Aqui está meu amigo, encontrei os erros e corrigi....

<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 * Math.PI);
        pincel.fill();
    }

    function limpaTela() {

        pincel.clearRect(0, 0, 600, 400);
    }
    var tamanhoMinimo = 20;
    var tamanhoMaximo = 30;
    var aumenta = 1;
    function pulsaCirculo(){

        if(tamanhoMinimo > tamanhoMaximo){
            aumenta = -1;

        }else if(tamanhoMinimo < tamanhoMaximo){
            aumenta = 1;
        }
        limpaTela()
        desenhaCirculo(300,200,tamanhoMinimo, "blue");
        tamanhoMinimo = tamanhoMinimo + aumenta;


    }
    setInterval(pulsaCirculo, 20);

</script>

Olá Felipe confere esse código aumenta e diminui com mais definição e muda a cor.

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

    var cores = ["blue","red","green","black","violet","orange","yellow"];
    var corAtual = 0;

    function desenhaCirculo(x, y, raio) {
        pincel.fillStyle = cores[corAtual];
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2 * Math.PI);
        pincel.fill();
    }

    function limpaTela() {
        pincel.clearRect(0, 0, 600, 400);
    }
    function mudaCor() {
        corAtual++;

        if (corAtual >= cores.length) {
            corAtual=0;
        }
    }
    var raio = 4;
    var sentido = 0;

    function atualizaTela() {
        limpaTela();

        if( raio > 40) {
            sentido = -1;
        } else if (raio < 5) {
            mudaCor();
            sentido = 1;
        } 
        desenhaCirculo(300, 200, raio);
        raio = raio + sentido;
    }

    setInterval(atualizaTela, 20);

    </script>