为什么我的电弧不是每帧都增长？

Question

我正在尝试制作日出的动画，为此我需要一个不断变大的圆圈。目前我使用的是弧线，但我的太阳并不是每一帧都在生长，所以它只是保持静止。我试过调用另一个函数，但我不确定该怎么做，或者我已经制作的代码是否缺少某些东西。这是我到目前为止编写的代码。

<!doctype html>
<html>

<head>
  <title>Animacion</title>
</head>

<body onload="call()">
  <!--canvas-->
  <canvas id="canvas" width="300" height="300" style="border: 1px solid black"></canvas>
  <script>
    function call() {
      window.requestAnimationFrame(draw);
    }

    function draw() {
      //context
      var canvas = document.getElementById('canvas');
      var ctx = canvas.getContext('2d');
      ctx.globalCompositeOperation = 'destination-over';
      ctx.clearRect(0, 0, 300, 300);
      ctx.fillStyle = "green";
      ctx.strokeStyle = "green";
      ctx.save();

      //ground
      ctx.beginPath();
      ctx.rect(0, 200, 300, 100);
      ctx.fill();
      ctx.stroke();
      ctx.closePath();
      ctx.save();

      //sun size    
      var sunSize = 50;
      //sun
      ctx.beginPath();
      ctx.strokeStyle = "yellow";
      ctx.fillStyle = "yellow";
      ctx.arc(145, 220, sunSize, sunSize, 0, Math.PI * 2, true);
      ctx.fill();
      ctx.stroke();
      sunSize = sunSize + 5;
      ctx.fill();
      ctx.stroke();
      ctx.closePath();
      ctx.save();
      //sky
      ctx.save();
      ctx.beginPath();
      ctx.strokeStyle = "cyan";
      ctx.fillStyle = "cyan";
      ctx.rect(0, 0, 300, 300);
      ctx.fill();
      ctx.stroke();
      ctx.closePath();
      ctx.save();


      window.requestAnimationFrame(draw);
    }
    call();
  </script>
</body>

</html>

我试过在 draw() 中使用另一个功能，但它基本上什么都不做，并且抹去了我拥有的天空。

Answer 1

您在 draw() 函数中初始化了 sunSize，因此每次运行时都会将 sunSize 重置为 50。将 sunSize 移到 <script> 部分下方的绘图函数之外；

<script>
      var sunSize = 50;
        function call(){
            window.requestAnimationFrame(draw);
        }
etc, etc

此外，使用 sunSize = sunSize + 5 而不是使用 sunSize += 5。他们的意思是完全相同的东西，只是写得更快。 5虽然可能有点快。尝试使用 0.1 或 0.2

为什么我的电弧不是每帧都增长？

why does my arc doesn't grow every frame?

html

javascript

animation

canvas

function