Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Coração com movimentos aleatórios senoidais

<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);  //Nossa tela cinza de 600 x 400 pixels

    function desenhaCoracao(x, y, raio) {
        var dist = (0.8*raio);  //dist = distância entre centros dos círculos 
        var h=2.5*raio;
        pincel.fillStyle = 'red';
        pincel.beginPath();
        //Bolinha esquerda
        pincel.arc(x-dist, y, raio, 0, 2 * Math.PI);
        pincel.fill();
        //Bolinha direita
        pincel.arc(x+dist, y, raio, 0, 2 * Math.PI);
        pincel.fill();
        //Triangulo inferior esquerdo
        pincel.moveTo(x,y);
        pincel.lineTo(x, y+2.3*raio);
        pincel.lineTo(x-1.45*raio, y+0.8*raio);
        pincel.fill();
        //Triangulo inferior direito
        pincel.moveTo(x,y);
        pincel.lineTo(x, y+2.3*raio);
        pincel.lineTo(x+1.45*raio, y+0.8*raio);
        pincel.fill();

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

    var x = 20; var vai=true; var xx = 0; var yy = 0; var angX=0;var angY=0 ; var k = 90;

    function atualizaTela() {
        limpaTela();
        angX = angX+0.06; //Incrementa âmgulo em radianos
        angY = angY+0.05; //Incrementa âmgulo em radianos, se o incremento for igual, o mov é circular
        if (angX>=2*Math.PI) {angX=0} //Se o ângulo ANGx for >= 360 graus, volta a 0 grau
        if (angY>=2*Math.PI) {angY=0} //Se o ângulo ANGy for >= 360 graus, volta a 0 grau    
        xx = Math.sin(angX)*k; //Cria uma variável senoidal adicional para somar ao centro X do coração 
        yy = Math.cos(angY)*k;//Cria uma variável cosenoidal adicional para somar ao centro Y do coração
        //Chamada da funcao Coracao
        desenhaCoracao(300+xx, 200+yy, x); 
        if (vai==true) { x++; } //incrementa o raio
        if (x>=30) {(vai=false);}
        if (vai==false) { (x=x-1);} //decrementa o raio
        if (x<=20) {vai=true;}
    }
    setInterval(atualizaTela, 20); //Temporizador com 20 milissegundos
</script>
2 respostas
solução!

Show Alexandre, parabéns!

Hê hê - esse eu curti montar!