Canvasを使ってボールを自由落下させる

##ボールの自由落下のHTML

<canvas id="myCanvas" width="480" height="320"></canvas>

<canvas>要素内に全てを描画します。

##描画の準備をする

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var y = 30;  //距離
var g = 9.8;  //重力加速度
var v = 0.0;  //速度 
var t = 0.15;  //時間
var e = -0.7;  //反発係数

getElementByIdを使って要素を取得します。また、2D描画コンテキストをctx変数に保存します。

##ボールを描画する

function drawBall() { 

  ctx.beginPath();
  ctx.arc(canvas.width/2, y , 30, 0, Math.PI*2, false);
  ctx.fillStyle = "rgba(240, 240, 240, 0.8)";
  ctx.fill();
  ctx.closePath();

}

ボールを描くときはbeginPath()メソッドとclosePath()メソッドの間に書きます。
arc()メソッドのパラメーターは次の通りです。
arc(円の中心のx座標, 円の中心のy座標, 半径, 円の開始角度, 円の終了角度, 描く方向)
ボールを自由落下させる為、y座標を変数yとしています。
yの初期値が30なのは、arc()メソッドは円の中心のy座標を指定するため、ボールが全て表示されるように半径分ずらしています。
fillStyleプロパティで指定した色をfill()メソッドを用いて塗りつぶしています。

##ボールを自由落下させる

function draw() { 

  ctx.clearRect(0, 0, canvas.width, canvas.height);

  drawBall();

  v += g * t;
  y += v * t; 

  if (y > canvas.height - 30) {
    y = canvas.height - 30;
    v *= e;
  }

  requestAnimationFrame(draw);

}

重力加速度の公式を使います。

g = 9.8m/s2
v = g * t

つまり、tの値を大きくすればするほど落下速度は速くなります。

if文は、ボールの位置のy座標がcanvasの高さより高かったら、速度に反発係数を掛けてボールを跳ね返らせます。
canvas.heightからは円の半径分30を引いてボールが全て表示されるようにしています。

ctx.clearRect(0, 0, canvas.width, canvas.height);はフレーム後に描画を削除しています。
clearRect()メソッドのパラメーターは次の通りです。
clearRect(四角形の左上端のx座標, 四角形の左端のy座標, 四角形の右下端のx座標, 四角形の右下端のy座標)
このメソッドを書かないとボールの軌跡が残ってしまいます。