표시되는 HTML은 <canvas> 요소는 웹 페이지의 직사각형 오브젝트로서 표시된다 :
HTML 캔버스
<canvas> 요소는 HTML에서 게임을 만들기위한 최적입니다.
<canvas> 요소는 게임을 만들기 위해 필요한 모든 기능을 제공합니다.
에, 그리기, 쓰기, 이미지를 삽입, 그리고 더 많은 자바 스크립트를 사용하여 <canvas> .
.getContext ( "2 차원")
<canvas> 요소는 내장 된 객체 호출이 getContext("2d") 그리기위한 메서드와 속성을 가진 개체를.
당신은에 대해 자세히 배울 수있는 <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> 요소와의 첫 번째 childNode에로 삽입 <body> 요소입니다.