Question

今天，我遇到了有关JavaScript的问题。我进行了一次练习，其中包括使用JavaScript在屏幕上创建一个圆圈，然后将其向右移动。因此，当我放入animate（）函数时，问题就来了。代码本身可以工作，它会创建一个圆圈，但是当我插入函数animate（），将代码放入其中，然后尝试使用requestFrameAnimation（animate）调用它时，它只是不会在屏幕上绘制。代码就在这里。我已经尽力了，但是无法解决。感谢您的答复。

HTML：

<head>
<style type="text/css">
   canvas{
       border:1px solid black;


   }
   body{
   margin:0px;
      background-color:red;


   </style>




</head>


          <body>
            <canvas></canvas>
            <script src="canvas.js"></script>




            </script>

          </body>

JS：

 canvas = document.querySelector('canvas');       //CANVAS SELECTOR
      canvas.width = window.innerWidth;         //MATCHING THE CANVAS WIDTH WITH THE WINDOW WIDTH
       canvas.height = window.innerHeight;      //********************HEIGHT***************HEIGHT
       context=canvas.getContext("2d"); 




    var x=200;
  function animate(){                                      //Starting the function

     context.beginPath();                                  //Initializing a Path of drawings
     context.arc(x,200,100,0,Math.PI*2, true);               //drawing the circle
     context.fillStyle="rgba(120,10,200,0.5)";            //filling the circle
     context.fill();
     context.strokeStyle = 'blue';                         //giving the circle a strokeline
     context.stroke();
 x+=1;                                                    //increasing the circle x so that it keeps moving towards right
                   requestAnimationFrame(animate);        //calling back to the function so it keeps drawing infinitely.

  }

麻烦在JS中绘制圆并移动它们

0 个答案: