Math.random()

Math.random() 함수는 0 이상 1 미만의 구간에서 근사적으로 균일한(approximately uniform) 부동소숫점 의사난수를 반환하며, 이 값은 사용자가 원하는 범위로 변형할 수 있다.
난수 생성 알고리즘에 사용되는 초기값은 구현체가 선택하며, 사용자가 선택하거나 초기화할 수 없다.

0 이상 1 미만의 부동소숫점 의사 난수 반환

Math.floor()

Math.floor() 함수는 주어진 숫자와 같거나 작은 정수 중에서 가장 큰 수를 반환합니다.

fillstyle

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  for (var i = 0; i < 6; i++){
    for (var j = 0; j < 6; j++){
      ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ', ' +
                       Math.floor(255 - 42.5 * j) + ', 0)';
      ctx.fillRect(j*25,i*25,25,25);
    }
  }
}

beginPath()

새로운 경로를 만든다
경로가 생성됬다면, 이후 그리기 명령들은 경로를 구성하고 만드는데 사용하게 된다

경로를 만들기 위한 첫번째 단계는 beginPath() 메소드를 사용하는 것
내부적으로, 경로는 도형을 이루는 하위경로(선, 아치 등)들의 집합으로 이루어져있다
이 메소드가 호출될 때 마다, 하위 경로의 모음은 초기화되며, 우리는 새로운 도형을 그릴 수 있게 된다

fill()

경로의 내부를 채워서 내부가 채워진 도형을 그린다

호(arc)

호나 원을 그리기위해서는 arc() 혹은 arcTo() 메소드를 사용

arc(x, y, radius, startAngle, endAngle, anticlockwise)

(x, y) 위치에 원점을 두면서, 반지름 r을 가지고, startAngle 에서 시작하여 endAngle 에서 끝나며 주어진 anticlockwise 방향으로 향하는 (기본값은 시계방향 회전) 호를 그리게 된다

남은 기능 구현

• 공크기를 변수로 설정하여 10 ~ 20px 크기로 설정
• 속도도 변수로 설정하여 200 ~ 400px/s 사이의 속도로 설정
• 공과 공이 부딪혀야 한다
• 작성코드 타입스크립트로 변환