반응형
캔버스에 이미지를 띄워본다.
준비물은 웹페이지 하나, 그리고 자바스크립트 코드 이다.
1. 웹페이지
본 웹페이지는 캔버스를 만들고, 캔버스에 이미지를 그리기 위한 기능을 한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이미지 테스트</title>
<script src="ImageExample.js"></script>
</head>
<body>
<canvas id="GameCanvas" width="800" height="600"
style="position: absolute; top:0px; left:0px">
Canvas를 지원하지 않습니다.
</canvas>
</body>
</html>
그 이외는 아무런 기능이 없다.
2. 자바스크립트 코드
Image 클래스를 사용해서 이미지를 불러오는 일을 먼저한다.
addEventLisetner (리스너 함수)를 사용해서 이미지가 로드 되면 drawScreen 함수를 호출되도록 했다.
var img = new Image();
img.src = "alien.png";
img.addEventListener("load",drawScreen,false);
function drawScreen(){
var theCanvas = document.getElementById("GameCanvas");
var Context = theCanvas.getContext("2d");
Context.fillStyle = "#000000";
Context.fillRect(0, 0, 800,600);
Context.drawImage(img, 300, 200 ,100,100);
}
drawScreen() 함수에서는
HTML 웹 문서에서 만든 캔버스를 가져온뒤 , 2D 컨텍스트를 설정한다.
검정 배경과 800*600 네모 사각형을 만들고, 이미지 를 300,200 좌표 그리고 가로,세로 100px 크기로 설정한다.
여기서 캔버스는 쉽게 도화지 라고 생각하자
컨텍스트는 그 도화지에 그리기 위한 툴 펜,붓 등으로 생각하면 이해가 쉽다.
브라우저에서 실행을 해보면, 이미지가 잘 그려진것을 볼 수 있다.
위 예제를 통해서
이미지를 불러오기 위해서는 Image 클래스를 사용한다는 점. 그리고 캔버스와 컨텍스 설정 하는 방법을 배웠다. 게임은 이미지가 움직이는 집합체이기에 이제 이미지를 컨트롤 할수 있는 기본을 안다고 할 수 있다.
반응형
'게임 만들기' 카테고리의 다른 글
| 비행슈팅 게임 만들기 기본 2편 (2) | 2024.09.22 |
|---|---|
| 비행슈팅 게임 만들기 기본 1편 (1) | 2024.09.19 |
| 자바스크립트 키보드 입력값 화면에 표시하기 3편 (0) | 2024.09.10 |
| 자바스크립트 키보드 입력값 화면에 표시하기 2편 (0) | 2024.09.09 |
| 자바스크립트 키보드 입력값 화면에 표시하기 1편 (0) | 2024.09.08 |
댓글