Question

我想要一个圆圈在我的画布上移动。

因此，对于动画的每一帧，我清除画布并绘制一个带有新原点坐标的新圆圈。

逐步执行我的代码，我可以看到clearRect函数运行良好，但每次重绘画布时，都会绘制新圆和所有前面的圆，包括第一个圆的直线中心到新的圆心。

档案index.html：

  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="UTF-8">
      <title>my website</title>
    </head>
    <body onLoad="init();">
      <canvas class="circle" id="pinkCircle" width="400" height="400"
        style="border:1px solid pink;">
      </canvas>
      <script src="js/myjs.js"></script>
    </body>
  </html>

档案js/myjs.js：

//set variables
  var canvas;
  var context;
  var myCircle = {x:50,y:100,r:20};
  //offset
  var dx = 8;
  var dy = 5;
  function init() {
    //set canvas and its context
    canvas = document.getElementById('pinkCircle');
    context = canvas.getContext('2d');
    //repeat the drawCircle function for each frame
    setInterval(drawCircle,1000);
  }
  function drawCircle() {
    //clear the canvas
    context.clearRect(0,0,canvas.width,canvas.height);
    //redraw a circle with a different origin coordinates each time
    context.beginPath;
    context.arc(myCircle.x, myCircle.y, myCircle.r, 0, 2 * Math.PI, true);
    context.closePath();
    context.stroke();
    if( myCircle.x<0 || myCircle.x>400) dx=-dx; 
    if( myCircle.y<0 || myCircle.y>400) dy=-dy;
    myCircle.x+=dx;
    myCircle.y+=dy;
  }

我经历了很多在线资源，但我无法弄清楚出了什么问题。

Answer 1

你的代码几乎是正确的。但你犯了一个小错误：没有在下面的行中给出圆括号：

context.beginPath;

应该是：

context.beginPath();

工作JS Bin Link

Answer 2

您是否检查过该页面的Autoredraw属性？我想在你的情况下必须设置为假。

html5动画：画布清除工作，但一切都重新绘制

2 个答案: