Javascript html5动画：画布清理工作，但一切都被重新绘制_Javascript_Html_Animation_Canvas

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

javascript html animation canvas

Javascript html5动画：画布清理工作，但一切都被重新绘制,javascript,html,animation,canvas,Javascript,Html,Animation,Canvas,我想在画布上画一个圆圈因此，对于动画的每一帧，我清除画布并用新的原点坐标绘制一个新的圆一步一步地执行我的代码，我可以看到clearRect函数工作得很好，但是每次重新绘制画布时，都会绘制新的圆和所有以前的圆，包括从第一个圆心到新圆心的直线文件index.html： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>my w

我想在画布上画一个圆圈

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

一步一步地执行我的代码，我可以看到

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>

我已经浏览了很多在线资源，但我不知道出了什么问题。

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

context.beginPath;

应该是：

context.beginPath();

工作

您是否已检查页面的Autoredraw属性？我想在您的情况下，它必须设置为false。

添加括号修复了我的问题。

context.beginPath();