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.height 부터는 원의 반경분 30을 당겨 공이 모두 표시되도록 하고 있습니다.
ctx.clearRect(0, 0, canvas.width, canvas.height); 는 프레임 후에 그리기를 삭제하고 있습니다.clearRect() 메소드의 매개변수는 다음과 같습니다.clearRect(四角形の左上端のx座標, 四角形の左端のy座標, 四角形の右下端のx座標, 四角形の右下端のy座標)이 방법을 쓰지 않으면 볼의 궤적이 남아 버립니다.