Question

我陷入了一个我不知道该怎么办的地方。我正在学习使用canvas元素的基础知识，所以我给了自己一个小任务。我想在画布上放一个圆圈，可以通过按下按钮向前推。所以每按一次按钮，圆圈应向前移动10px。但现在我被困了一段时间，我无法弄清楚我做错了什么。（我也是javascript编程和编程的新手。）

这是我到目前为止的代码

    <html>
<head></head>
<body>
<button onclick="animationStep()" id="startAnimation" style="width:200px; height:50px; color:"green";">Press here to move</button>
<canvas id="myCanvas" width="500" height="300"
        style="border: 1px dotted black">
</canvas>
<script>


   function drawDisc( x,y,r ) {
      theContext.beginPath();
      theContext.arc(x,y,r,0,Math.PI*2,false);
      theContext.closePath();
      theContext.fill();
   }

   function startDrawing(canvasId) {
      var canvasElement = document.getElementById(canvasId);
      var drawingContext = canvasElement.getContext("2d");
      return drawingContext;
   }

   var theContext = startDrawing("myCanvas")

   var x = 100; 

   function animationStep(){
       while( x <= 400 ) {
          x = x + 10;
          theContext.clearRect(0,0,500,300); 
          drawDisc( x, 100, 30 );
          console.log("animated");
       }
    }
</script>
</body>
</html>

当我查看控制台日志时，它立即执行动画36次。我认为它停留在while循环中，但我无法弄清楚如何让它正常工作。也许我忽视了一些简单的事情？

谢谢！

Answer 1

摆脱while循环。

所以

function animationStep(){
   while( x <= 400 ) {
      x = x + 10;
      theContext.clearRect(0,0,500,300); 
      drawDisc( x, 100, 30 );
      console.log("animated");
   }
}

应该是

function animationStep(){
      x = x + 10;
      theContext.clearRect(0,0,500,300); 
      drawDisc( x, 100, 30 );
      console.log("animated");
}

在画布中移动对象

1 个答案: