Canvas에 이미지 삽입하기 HTML5



 

Canvas에 이미지 삽입하기



캔버스에 이미지를 삽입하기 위해서는 drawImage() 메서드를 사용한다.

 

 

- drawImage(image, dx, dy)

   이미지를 원래 크기로 삽입

 

- drawImage(image, dx, dy, dw, dh)

   이미지 사이즈의 위치를 지정

 

- drawImage(image, dx, dy, sx, sy, sw, sh, dx, dy, dw, dh)

   원래 이미지로부터 일부분을 잘라내어 삽입

   잘라내는 부분은 (sx, sy)를 왼쪽 위 시작정점으로해서 너비 sw, 높이 sh 인 사각형 모양

 

 

위에서 image부분에 올수 있는것은 총 세가지 종류가 있다.

 

1. img 요소의 DOM 객체

2. video 요소의 DOM 객체

3. canvas 요소의 DOM 객체

 

결국 DOM 객체군.

예제코드를 실행해보면서 어떤놈인지 살펴보자.

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> HTML5 TEST </TITLE>
</HEAD>
<BODY>
 <canvas id="canvas1" width="300" height="300"></canvas>

 

 <SCRIPT LANGUAGE="JavaScript">
 <!--
 var canvas = document.getElementById("canvas1");
 var context = canvas.getContext("2d");

 

 var image = new Image();

 

 image.onload = function() {
  context.drawImage(image, 0, 0, canvas.width, canvas.height);
 }

 

 image.src = "a.jpg";
 //-->
 </SCRIPT>

</BODY>
</HTML>

 

예제를 작성하면서 과연 a.jpg에는 누구사진을 넣어야 할까라는 주제로 약 십여분간 서핑을 해야했다;;;

소간지를 골랏지만, 왠지 맘에 안드는 기분이 들어서 '여자연예인'이라고 검색했다가 아주 빠질뻔했다는 비화...

 

코드를 보자.

캔버스 하나를 생성하였고, 자바스크립트에서 이를 객체로 가져온다.

그리기컨텍스트(context)를 생성하였고, 새로운 이미지 객체 image를 생성한다.

 

일단 image.onload는 이미지가 로딩된 이후에 호출되는 익명메서드니까 일단 패스

image가 가질 그림파일은 a.jpg 란다.

 

a.jpg가 로드되면, 아까 말한 익명메서드가 호출되고 function()내의 코드를 다시 살펴보면...

그리기컨텍스트를 이용하여 그림을 그려내잔다.

image객체를 그려넣을 것이고, (0, 0)서부터 시작되며 캔버스의 가로와 높이만큼 그릴것이란다.

 

이 예제에서 중요한점은 이미지나 비디오 요소를 캔버스에 그려넣을때에는

반드시 해당 요소의 로딩이 완료된 이후에 drawImage() 를 사용해야 한다는 점이다.

 

결과는 아래와 같다.

 


 


덧글

댓글 입력 영역


통계 위젯 (화이트)

1622
132
358626

red 210