javascript - 使用普通 JavaScript 的脉冲效果

Question

尝试使用普通 javascript 的 Canvas 对象创建脉冲效果。每个函数似乎都在正确调用并且我的所有值都正确记录，但由于某种原因在 ballShrink() 函数中调用 drawBall() 函数时没有任何反应。我期待它动画缩小，但它没有。 ballRadius 正在减小，但没有动画发生。我的代码在这里，JSFiddle 在这里 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

问题是您没有清除上一张图，而只是在现有图上添加新图。这是一个更新的 fiddle :https://jsfiddle.net/96hthyw0/1/但简而言之，我所做的就是将您的 ballShrink 函数更改为:

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