Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

coração pulsante

não consegui responder o post que o igormvfreitas fez, então estou criando outro com a minha solução para o coração pulsante:

<meta charset="UTF-8">

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


<script>

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

    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 desenhaTriangulo(x1,x2,y,x3,y3,cor){

        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.moveTo(x1,y);
        pincel.lineTo(x2,y);
        pincel.lineTo(x3,y3);
        pincel.fill();

    }

    function limpaTela() {

        pincel.clearRect(0, 0, 600, 400);
    }

    //CONFIGS
    raio = 30;            //tamanho do raio da bolinha do coracao
    trianguloX1 = 250    //posicao x1 triangulo
    trianguloY = 155        //posicao Y triangulo
    trianguloX2 = 350    //posicao x2 triangulo
    //trianguloY2 = 155     //posicao y2 triangulo
    trianguloX3 = 300    //posicao x3 triangulo
    trianguloY3 = 208    //posicao y3 triangulo


    function pulsaCoracao(){
        if (raio == 30) {
            aumentaCoracao = true
            diminuiCoracao = false
        }
        if (raio == 35) {
            aumentaCoracao = false
            diminuiCoracao = true
        }

        if (aumentaCoracao) {
            limpaTela()
            desenhaCirculo(275,140,raio,"red");
            desenhaCirculo(325,140,raio,"red");
            desenhaTriangulo(trianguloX1,trianguloX2,trianguloY,trianguloX3,trianguloY3,"red")
            trianguloX1--
            trianguloX2++
            trianguloY++
            //trianguloX3++
            trianguloY3++
            raio++
        }
        if (diminuiCoracao) {
            limpaTela()
            desenhaCirculo(275,140,raio,"red");
            desenhaCirculo(325,140,raio,"red");
            desenhaTriangulo(trianguloX1,trianguloX2,trianguloY,trianguloX3,trianguloY3,"red")
            trianguloX1++
            trianguloX2--
            trianguloY--
            //trianguloX3++
            trianguloY3--
            raio--
        }


    }


    setInterval(pulsaCoracao,35);
    //limpaTela()
    //desenhaCirculo(275,140,raio,"red");    
    //desenhaCirculo(325,140,raio,"red");    
    //desenhaTriangulo("red")



</script>
1 resposta
solução!

Olá Gabriel, esse código está correto também. Parabéns!

Só uma observação: fique atento em algumas linhas que não colocou ponto e vírgula (;) no final.

Abraços e bons estudos!