html 문서 안에 벽돌깨기 게임을 구현하기 위한 canvas를 만들어놨으니
이제 canvas에 어떻게 그래픽을 그리는지 알아보자.
우선 bb.js 파일에 다음 코드를 추가한다.
var canvas = document.getElementById("bb");
var ctx = canvas.getContext("2d");canvas라는 변수를 만들고 거기에 canvas 엘리먼트에 대한 참조를 저장했다. 그 후 캔버스에 2d 그래픽을 그리기 위해 사용되는 도구인 2d rendering context를 ctx에 저장했다.
새로운 것들
1. var
var는 자바스크립트 언어에서 사용되는 키워드로 변수를 선언할때 사용한다.
하지만 여러 문제점들 때문에 최근에는 let이라는 키워드를 사용한다고 한다.
2. document.getElementById()
document.getElementById()는 주어진 문자열과 일치하는 id 속성을 가진 요소를 찾아서 이를 나타내는 엘리먼트 객체를 반환하는 메소드이다.
자바스크립트에서 html 문서의 엘리먼트에 접근하기 위하여 사용한다.
3. HTMLCanvasElement.getContext()
getContext(contextType) 메소드는 캔버스의 드로잉 컨텍스트를 반환한다.
contextType은 2d 그래픽을 그릴 것이기 때문에 "2d"를 입력했다.
