[Canvas] canvas 11. Image

캔바스의 더 재밌는 기능중에 하나는 바로 이미지를 바로 가져다 쓴다는점입니다. 거의 모든 이미지들을 지원하는 덕분에 이미지의 큰 제약없이 사용할수가 있습니다.

이미지를 불러오기위해서는 두가지절차가 필요합니다.
1. 이미지 객체를 생성하기.
2. 생성된 이미지 객체에 이미지를 넣기.

이미지를 가져오는 방법에는 기본적으로 네가지정도를 쓰고 있는데요.

같은 페이지에있는 이미지를 가져올때. 
-document.images 메소드나 document.getElementsByTagName , document.getElementById 메소드 들을 이용하여 가져오는 방법.

다른 캔바스 요소를 가져올때
- 마찬가지로 document.getElementsByTagName , document.getElementById 메소드를 사용하여 다른 캔바스의 이미지를 가져올수 있습니다. 가져오기전에 캔바스에 어떤그림을 그려놓았는지 확인은 필수 :)

처음부터 만들기 
- 스크립트를 이용하여 직접 이미지를 만드는방법이 되겠습니다. 이방법은 스크립트가 실행되는 시점에 이미지 파일이 로딩되기때문에 필요에따라서는 프리로딩이 필요할수도 있습니다. 

이미지 객체를 기본 생성하려면 다음과 같이 하면 됩니다.

var img = new Image();   // Create new Image object  

img.src = 'myImage.png'; // Set source path  

이렇게 될경우 이 스크립트가 실행되는 시점에서 이미지가 로딩이 일어나고, 이미지가 로딩이 완료되기 전에는 다음 스크립트가 실행되지 않습니다. 이점 참고하시기 바랍니다.
그래서 onload 이벤트 등에 미리 이미지를 프리로딩하는 방법을 쓰기도 합니다.

data: url 방식의 이미지 추가하기

또 다른 이미지 불러오는 방법으로 data:url 방식이 있습니다. 이놈은 링크자체에 base64 로 완전히 인코딩된 url 링크를 직접 사용할수 있습니다. 이 방법은 링크를 숨겨주는등의 몇가지 장점이 있으나 캐쉬되지않아 큰 이미지의경우 오히려  사이트 속도에 큰 영향을 줄수도 있습니다.

var img_src = 'https://t1.daumcdn.net/cfile/tistory/2660F84256E67F581A"font-family: Tahoma, 굴림; font-size: 9pt; color: rgb(34, 34, 34); margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">위와같이 사용하게 됩니다.

이미지 그리기

그럼 실제로 이미지를 캔바스에 그려보도록 하겠습니다.

이미지를 캔바스에 그리는데는 

drawImage(image, x, y)

이 함수가 필요합니다. 이미지 객체와 x,y 좌표가 필요하지요.
캔바스에 이미지를 그려준 뒤에는 그 이미지 위에 라인이나 path도형등을 그려줄수 있습니다.
예제를 보며 설명하도록 하겠습니다.

[출처]모질라 캔바스 튜토리얼

미리보기

function draw() {  

    var ctx = document.getElementById('canvas').getContext('2d');  

    var img = new Image();  

    img.onload = function(){  

      ctx.drawImage(img,0,0);  

      ctx.beginPath();  

      ctx.moveTo(30,96);  

      ctx.lineTo(70,66);  

      ctx.lineTo(103,76);  

      ctx.lineTo(170,15);  

      ctx.stroke();  

    }  

    img.src = 'images/backdrop.png';  

  }  

위의 함수는 기본적인 그래프를 그려주는 함수 인데요. X와 Y축라인을 이미지를 불러와 그려준뒤

path도형으로 그래프 라인을 그려주고 마무리한 예제 입니다.