加速度によって、徐々に速度が上がっていく動作

acceleration.html

<html>
<head>
  <META http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <script>
  var context;
  var currentX = 0;
  var vectorX = 0;
  var accelX = 0;

  function onInitialize() {
    var canvas = document.getElementById("canvas");
    context = canvas.getContext("2d");
    clearCanvas();

    vectorX = 1;
    accelX = 0;

    var frameRate = 1000/30;
    setTimeout(function updateFrame() {
      onUpdate();
      onDraw();
      setTimeout(updateFrame, frameRate)
    }, frameRate);
  }

  function getCenterX() { return canvas.getBoundingClientRect().width / 2; }
  function getCenterY() { return canvas.getBoundingClientRect().height / 2; }
  function getCircleRadius() { return 100; }

  function drawCircle(x, y, radius, color) {
    context.beginPath();
    var startAngle = 0;
    var endAngle = 2 * Math.PI;
    context.arc(x, y, radius, startAngle, endAngle, false);
    context.fillStyle = color;
    context.fill();
  }

  function clearCanvas() {
    context.fillStyle="rgb(255,255,255)";
    context.fillRect(0, 0, canvas.getBoundingClientRect().width, canvas.getBoundingClientRect().height);
  }

  function onUpdate() {
    vectorX = vectorX + accelX;
    currentX = currentX + vectorX;
    accelX = accelX + 0.1;
  }

  function onDraw() {
    clearCanvas();
    drawCircle(currentX, 15, 10, "rgb(0,0,0)");
  }
  </script>
</head>
<body onload="onInitialize();">
  <div style="border:solid 1px #000000;width:800px;" id="candiv">
    <canvas id="canvas" width="800px" height="30px"></canvas>
  </div>
</body>
</html>

https://htmlpreview.github.io/?https://gist.githubusercontent.com/faithandbrave/c814d64fc3061e0efdb5f530e2214863/raw/ce81575b87226600d94c7371ba7cb056d4037b7b/acceleration.html