이미지를 표시하는 방법(HTML)
[ 이 문서는 Windows 런타임 앱을 작성하는 Windows 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]
canvas 요소는 애니메이션, 그래픽, 게임 등의 그래픽 생성을 위해 JavaScript를 사용할 수 있는 HTML 문서 상의 그리기 가능한 영역입니다. 이 항목에서는 먼저 canvas 요소를 사용하여 이미지를 표시하는 데 필요한 단계에 대해 설명합니다.
사전 요구 사항
이 항목에서는 다음을 가정합니다.
- JavaScript용 Windows 라이브러리 템플릿을 사용하는 JavaScript로 작성한 기본 Windows 스토어 앱을 만들 수 있습니다.
- HTML 및 JavaScript에 대해 기본적으로 이해하고 있습니다.
JavaScript로 작성된 첫 번째 Windows 스토어 앱을 만드는 방법에 대한 자세한 내용은 JavaScript를 사용하는 첫 번째 Windows 스토어 앱 만들기를 참조하세요. WinJS 템플릿 사용에 대한 지침은 WinJS 도구 키트를 얻고 사용하는 방법을 참조하세요.
지침
단계 1: 렌더링 컨텍스트 가져오기
캔버스에 이미지를 그리려면 캔버스 요소에서 렌더링 컨텍스트를 가져와야 합니다. 렌더링 컨텍스트는 모든 그리기 메서드와 속성이 지정되는 곳입니다. 각 <canvas> 요소에는 관련 렌더링 컨텍스트(대체로 변수 이름 ctx가 지정됨)가 있으므로 페이지가 완전히 로드(즉, canvas 요소가 DOM에 완전히 포함)되지 않으면 이 컨텍스트에 액세스할 수 없습니다. DOM에서 canvas 요소를 사용할 수 있도록 하는 한 가지 방법은 다음과 같이 페이지 끝에 스크립트 블록을 배치하는 것입니다.
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Canvas element image drawing</title>
<style>
.
.
.
</style>
</head>
<body>
.
.
.
<script>
.
.
.
</script>
</body>
</html>
이제 다음과 같이 렌더링 컨텍스트를 가져올 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Canvas element image drawing</title>
<style>
canvas {
border: 1px black solid; /* Draw a border around the canvas element. */
}
</style>
</head>
<body>
<canvas width="491" height="538">Canvas is not supported - upgrade your browser.</canvas>
<script>
var ctx = (document.getElementsByTagName('canvas')[0]).getContext('2d');
</script>
</body>
</html>
보시는 것처럼 canvas 요소에는 491px x 538px 이미지가 필요합니다. 컨텍스트(ctx)를 가져오기 위해 DOM 내의 모든 canvas 요소 목록을 가져오고 첫 번째(유일한) 요소를 선택한 다음 getContext('2d') 호출을 통해 해당 컨텍스트를 가져옵니다.
단계 2: 표시할 이미지 로드
이미지를 클라이언트로 다운로드하려면 상당한 시간이 걸릴 수 있으므로 이미지가 완전히 로드된 후에만 액세스해야 합니다. 이렇게 하려면 다음과 같이 이미지 개체 onload 이벤트 처리기를 사용합니다.
var imageToDraw = new Image();
imageToDraw.onload = function() {
// It is now safe to access the image.
}
imageToDraw.src = 'images/duckCat.jpg';
이 예제에서는 관련 이미지(duckCat.jpg)가 완전히 로드된 후에만 익명 함수를 호출합니다.
단계 3: 이미지 표시
onload 이벤트 처리기를 사용하여 다음과 같이 캔버스에 이미지를 표시할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Canvas element image drawing</title>
<style>
body {
width: 402px; /* Accommodate the 1px canvas borders. */
margin: 0 auto; /* Center the page's content. */
}
h1 {
text-align: center;
}
canvas {
border: 1px black solid; /* Draw a border around the canvas element. */
}
</style>
</head>
<body>
<h1>How to display an image using the canvas element</h1>
<canvas width="491" height="538">Canvas is not supported - upgrade your browser.</canvas>
<script>
var ctx = (document.getElementsByTagName('canvas')[0]).getContext('2d');
var imageToDraw = new Image();
imageToDraw.onload = function() {
ctx.drawImage(imageToDraw, 0, 0);
}
imageToDraw.src = 'images/duckCat.jpg';
</script>
</body>
</html>
설명
drawImage 메서드는 이전 예제보다 더 많은 매개 변수를 사용하며 매우 강력합니다. 자세한 내용은 Mozilla 개발자 네트워크 웹 사이트의 이미지 사용을 참조하세요.