Brick Breaker-3

이제 canvas에 무언가를 그릴 준비가 되었으니 공과 공을 칠 막대를 그려보자.

canvas에 사각형과 원을 그리는 방법은 다음과 같다.

ctx.beginPath();
ctx.rect(0, 0, 50, 10); //(사각형의 시작 x 좌표, '' y 좌표, 넓이, 높이)
ctx.fillStyle = "black";
ctx.fill();
ctx.closePath();

ctx.beginPath();
ctx.arc(20, 50, 5, 0, Math.PI*2, false);//원의 시작 x,y 좌표, 원의 반지름, 시작 각도와 끝 각도, 그리는 방향(false=시계방향, true = 반시계방향)
ctx.fillStyle = "black";
ctx.fill();
ctx.closePath();

이렇게 공과 막대를 그리고 매 프레임마다 그리는것을 지속적으로 갱신하기 위해 함수를 새로 만들어준다.

function draw() {
    ctx.beginPath();
	ctx.rect(0, 0, 50, 10);
	ctx.fillStyle = "black";
	ctx.fill();
	ctx.closePath();

	ctx.beginPath();
	ctx.arc(20, 50, 5, 0, Math.PI*2, false);
	ctx.fillStyle = "black";
	ctx.fill();
	ctx.closePath();
}
setInterval(draw, 10);

새로운 것들
1. canvasRenderingContext2D
beginPath(),closePath(),fill,fillStyle 등등의 명령어로 2D 그래픽을 렌더링하는 API
2. function
function 명령어는 새로운 함수 객체를 생성시켜주는 동작을 한다.
3. setInterval
setInterval(function,delay) 설정한 delay 밀리세컨드마다 function 함수 반복 실행을 해주는 메소드이다.