Question

尝试使用普通的vanilla 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

问题是您没有清除最后一张图，只是在现有图纸的顶部添加新图纸。这是一个更新的小提琴：https://jsfiddle.net/96hthyw0/1/但简而言之，我所做的就是将HttpServletRequest.getRemoteUser()函数更改为：

ballShrink

使用vanilla JavaScript的脉冲效果

1 个答案: