Canvas(5)_이미지 사용하기

해당 게시글은 2022.03.10에 깃허브로 작성되었습니다.

 

---

 

<canvas>에서는 PNG, GIF, JPEG 등 브라우저에서 지원되는 포맷형태라면 어떠한 외부 이미지라도 사용될 수 있다.

 

이미지를 canvas로 불러오는 것은 기본적으로 다음 두 단계를 필요로 한다.

 

  1. HTMLImageElement object를 참조하거나 다른 <canvas> 요소를 소스로 사용한다.

  이는 URL을 가지고 이미지를 사용할 수 있다.

 

  2. drawImage() function을 사용하여 canvas에 나타난 이미지 위에 그림을 그린다.

 

---

 

1. 이미지 불러오기

canvas는 아래의 데이터 타입을 이미지 소스로 사용할 수 있다.

- HTMLImageElement
 <img> element와 마찬가지로, Image() constructor를 통해 만들어진 이미지이다.

- SVGImageElement
 <img> element를 사용해 불러온 이미지이다.

- HTMLVideoElement
 HTML <video> 요소를 이미지 소스로 사용하여 비디오의 현재 프레임을 이미지로 불러온다.

- HTMLCanvasElement
 다른 <canvas> 요소를 이미지 소스로 사용한다.

 

---

 

2. 같은 페이지의 이미지 사용하기

- document.images 모음

- document.getElementByTagName() 메소드

- (사용하고자 하는 특정한 이미지의 ID를 알 경우) document.getElementById() 를 사용하여 특정한 이미지를 참고할 수 있다.

 

---

 

3. 처음부터 이미지 만들기

스크립트 내에서 처음부터 HTMLImageElement object를 생성할 수 있다.

var img = new Image();   // Create new img element
img.src = 'myImage.png'; // Set source path

 

만약 이미지 로딩이 다 끝나기 전에 drawImage()를 호출한다면, 아무것도 실행되지 않을테니

아래와 같이 스크립트를 작성하여 로딩이 된 후 이벤트가 실행될 수 있도록 하자.

var img = new Image();   // Create new img element
img.addEventListener('load', function() {
    // execute drawImage statements here
  }, false);
img.src = 'myImage.png'; // Set source path

 

---

 

다음 시간에는 애니메이션 생성 시에 유용하게 활용되는 그리드를 변형하는 방법에 대해 배워보자.