Pulse-Effekt mit Vanille JavaScript

Question

Versuchen, einen Pulse-Effekt mit einem Leinwand-Objekt mit plain vanilla javascript zu erstellen. Jede Funktion scheint korrekt aufzurufen und alle meine Werte protokollieren richtig, aber aus irgendeinem Grund passiert nichts, wenn die Funktion drawBall() in der Funktion ballShrink() aufgerufen wird. Ich erwarte, dass es zum Schrumpfen animiert, aber das tut es nicht. ballRadius reduziert, aber keine Animation. Ich habe meinen Code hier und ein JSFiddle hier https://jsfiddle.net/96hthyw0/

function draw() { 
     ctx.clearRect(0, 0, canvas.width, canvas.height); 
     drawBall(); 
    } 

function ballGrow() { 
    ballRadius += 1; 
    drawBall(); 
    if (ballRadius === 20) { 
     clearInterval(ballGrowInterval); 
     ballShrinkInterval = setInterval(ballShrink, 100); 
    } 
} 

function ballShrink() { 
    ballRadius -= 1; 
    drawBall(); 
    if (ballRadius === 0) { 
     clearInterval(ballShrinkInterval); 
    } 
} 

function testInterval() { 
    ballGrowInterval = setInterval(ballGrow, 100); 
} 

testInterval(); 
draw(); 

Answer 1

Das Problem ist, Sie nicht Ihre letzte Zeichnung Clearing sondern nur das Hinzufügen von neuen Zeichnungen auf dem bestehenden. Hier ist eine aktualisierte Geige: https://jsfiddle.net/96hthyw0/1/ aber kurz alle ich tat, war Ihre ballShrink Funktion dies ändern:

function ballShrink() { 
    ballRadius -= 1; 
    draw(); // clear canvas - note you could add this to ball grow too 
    drawBall(); 
    if (ballRadius === 0) { 
    clearInterval(ballShrinkInterval); 
    } 
}