게임 캔버스
HTML <canvas> 요소는 웹 페이지에서 사각형 객체로 표시됩니다:
HTML Canvas
<canvas> 요소는 HTML에서 게임 개발에 매우 적합합니다.
<canvas> 요소는 게임 제작에 필요한 모든 기능을 제공합니다.
JavaScript를 사용하여 <canvas> 을 사용하여 그리기, 텍스트 쓰기, 이미지 삽입 등을 수행할 수 있습니다.
.getContext("2d")
<canvas> 요소는 내장 객체인 getContext("2d") 객체는 그리기와 관련된 메서드와 속성을 제공합니다.
우리의 Canvas 튜토리얼 에서 Canvas 튜토리얼에 대해 배우세요. <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() 호출 myGameArea 객체의}} start() 메서드를 생성합니다.
start() 메서드는 <canvas> 요소를 첫 번째 자식 노드로 삽입합니다. <body> 요소 내에.
