게임 캔버스
HTML <canvas>요소는 웹 페이지에서 직사각형 개체로 표시됩니다.
HTML 캔버스
이 <canvas>요소는 HTML로 게임을 만드는 데 적합합니다.
이 <canvas>요소는 게임 제작에 필요한 모든 기능을 제공합니다.
JavaScript를 사용하여 이미지를 그리고, 쓰고, 삽입하는 등의 작업을
<canvas>.
.getContext("2d")
요소에는 그리기를 위한 메서드와 속성이 포함된 개체 라고 <canvas>하는 내장 개체가 있습니다.getContext("2d")
Canvas Tutorial<canvas> 에서 요소와
getContext("2d")객체 에 대해 자세히 알아볼 수 있습니다 .
시작하다
게임을 만들려면 먼저 게임 영역을 만들고 그림을 그릴 준비를 하십시오.
예시
function startGame() {
myGameArea.start();
}
var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
}
}
myGameArea이 자습서의 뒷부분에서 개체 에 더 많은 속성과 메서드가 있습니다.
함수 는 개체 startGame()의 메서드
start()를 호출합니다.
myGameArea
이
start()메서드는 요소를 만들고 <canvas>요소의 첫 번째 자식 노드로 삽입합니다 <body>.