html5 API 입문 (2) -Canvas Text-

html5 API 입문 (2) 

-Canvas Text-

 

html5 API 중에서 가장 강력한 기능을 꼽으라면 당연 'Canvas'이다. canvas 기능 중에서도 강력한 기능은 이미지 부분이다. 이번 포스팅에서는 캔버스 이미지와 관련된 API를 알아보자.  

* canvas에서 사용할 수 있는 외부 이미지 포맷 : png, gif, jpg (기본) 기타 등.. 

1 『 이미지 함수 』

함수명	설명
drawImage ( image url삽입 , x좌표값 , y 좌표값 )	( x , y ) 좌표에 image 주소의 이미지를 캔버스에 그린다.
drawImage ( image url , x , y , width , height )	임의적으로 설정한 width와 height값으로 이미지를 그린다.
drawImage ( image url , sx , sy , swidth , sheight , dx , dy , dwidth , dheight )	image의 ( sx , sy )에서 가로=swidth, 세로=sheight 만큼 잘라내   서 캔버스 좌표축( dx , dy )에, 가로=dwidth , 세로=dheight 만큼  의 크기로 그린다.

 

Canvas가 이미지를 그리는 매커니즘은 2가지로 진행된다. 

1) drawImage함수에서 지정한 image url(리소스)을 따라 이미지를 찾아서 가져온다.

2) drawImage함수를 이용해서 이미지를 캔버스에 그린다.

2 『 이미지 획득  』

캔버스 API가 이미지를 찾는 방법은 다음 3 가지가 대표적이다.  

1) <img>태그를 통해서 이미지 획특 ( HTMLELEMENT 이용)

2) <video>에서 재생되고 있는 프레임을 복사해서 Canvas에 출력하는 방식

3) 다른 <canvas>에 그려진 이미지를 리소스로 활용 

 

3『 <img>태그, 이미지 획득 』 

---

<section>

<figure>

<img id="heart" src="http://tistory2.daumcdn.net/tistory/2784544/skin/images/heart.gif">

<figcaption> 심장마비 </figcaption>

</figure>

 

<figure>

<canvas id="myCanvas" width="320" height="280"></canvas>

<figcaption>'심장마비' -> 캔버스 복사</figcaption>

</figure> 

</section>

<script>

var canvas = document.getElementById('myCanvas');

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

var heartSrc = document.getElementById('heart');

 

heartSrc.addEventListener("load",function( ){

ctx.drawImage(this,0,0);

})

</script>

---