javascript - HTML5 Canvas -动圈

Question

我在文本编辑器上编写了以下 html 代码:

window.onload = function() {

  var canvasC = document.getElementById("canvasCircle");
  var contextC = canvasC.getContext("2d");
  var canvasBG = document.getElementById("canvasBackground");
  var contextBG = canvasBG.getContext("2d");

  var xPos = 50;
  var yPos = canvasC.height / 2;
  var radius = 40;
  var endXPos = canvasC.width - 75;
  var change = 10;
  var startAngle = (Math.PI / 180) * 0;
  var interval = 80;
  var endAngle = (Math.PI / 180) * 360;

  contextBG.fillStyle = "silver";
  contextBG.fillRect(0, 0, canvasBG.width, canvasBG.height);

  var intervalID = setInterval

  function drawCircle() {

    contextC.clearRect(0, 0, canvasC.width, canvasC.height);

    contextC.strokeStyle = "green";
    contextC.lineWidth = 4;
    contextC.shadowOffsetX = 3;
    contextC.shadowOffsetY = 3;
    contextC.shadowBlur = 5;
    contextC.shadowColor = "grey";

    xPos += change;

    if (xPos > endXPos) {
      clearInterval(intervalID)
    };

    contextC.beginPath();
    contextC.arc(xPos, yPos, radius, startAngle, endAngle, true);
    contextC.stroke();
  }
}

<div>
  <canvas id="canvasCircle" width="400" height="125" style="border:2px solid black; position:absolute; left:auto; top:auto; z-index: 2">
    Your browser doesn't currently support HTML5 Canvas.
    </canvas>
  <canvas id="canvasBackground" width="400" height="125" style="border:2px solid black; position:absolute; left:auto; top:auto; z-index: 1">
    Your browser doesn't currently support HTML5 Canvas.
    </canvas>
</div>

我绘制的代码应该显示一个从左到右移动的圆圈，但由于某种原因，只保留了背景。
有人可以告诉我我做错了什么吗，谢谢。

Answer 1

定义函数 drawCircle() 后，您忘记调用它，并且为了移动圆，您必须使用 setInterval 来有争议地调用此函数
在脚本中的 function drawCircle() {...} 之后添加 setInterval(drawCircle, 1000);。