# 캔버스에 이미지 띄우는 방법
1. 이미지 객체 생성
const img = new Image();
2. 이미지 소스 설정
img.src = '이미지 경로';
3. 이미지 그리기
ctx.drawImage(img, x좌표, y좌표, 너비, 높이);
* 너비/높이는 옵션이며, 생략시 원본 크기대로 이미지를 띄운다.
참고) 아래와 같이 이미지 로드가 완료된 후에 그리도록 설정하는게 안전하다.
img.onload = function(){
ctx.drawImage(img, x좌표, y좌표, 너비, 높이)
}
참고) sprite 이미지 사용시, 이미지 자르기 옵션을 추가 적용한다.
ctx.drawImage(img, sx, sy, swidth, sheight, x, y, width, height);
* 스프라이트 이미지에서 사용할 영역의 좌상단 좌표와 너비, 높이를 설정하면 된다.
# 샘플 예제 코드
캔버스에 이미지 하나 띄우는 예제 코드.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<!-- HTML -->
<!-- 1. canvas 엘리먼트를 선언한다: id, widht, height를 태그 내에서 지정해준다. -->
<canvas id="myCanvas" width="400" height="300"></canvas>
<!-- Javascript -->
<script>
// 1. canvas 엘리먼트를 취득한다.
const canvas = document.getElementById('myCanvas');
// 2. 2d모드의 그리기 객체를 취득한다. => 이 객체를 통해 canvas에 그림을 그릴 수 있다.
const ctx = canvas.getContext("2d");
// 3. 이미지 객체 생성
const img = new Image();
// 4. 이미지 소스 설정
img.src = '../img/img_patrn.png';
// 5. 이미지 로드이벤트- 콜백함수 등록
img.onload = function(){
// 이미지 그리기
ctx.drawImage(img, 100, 100);
}
</script>
</body>
</html><결과물>
캔버스 기초는 아래 글 참고
'개발(Development) > HTML Canvas(캔버스)' 카테고리의 다른 글
| HTML Canvas(캔버스) 텍스트 그리기 방법: fillText, strokeText (0) | 2021.06.04 |
|---|---|
| HTML Canvas(캔버스) 패턴 이미지 채우기 적용 방법: createPattern (0) | 2021.06.04 |
| HTML Canvas(캔버스): 그라데이션 gradient 색 설정 방법 (0) | 2021.06.03 |
| HTML Canvas(캔버스): 원 circle 그리기 방법 (0) | 2021.06.03 |
| HTML Canvas(캔버스): 사각형 그리기 방법 (0) | 2021.06.03 |
댓글