[html5] drawImage - canvas에 이미지 그리기

drawImage는 캔버스에서 이미지를 그려줌
이미지를 그려주기 위해 먼저 new Image 로 객체를 생성한 뒤 onload로 이미지를 로딩한 후에 캔버스에서 이미지를 그릴 수 있음

drawImage(image ,canvas_x, canvas_y)

- image : 이미지 객체
- canvas_x : 캔버스의 x 좌표
- canvas_y : 캔버스의 y 좌표

drawImage(image ,canvas_x, canvas_y,canvas_width,canvas_height)

- image : 이미지 객체
- canvas_x : 캔버스의 x 좌표
- canvas_y : 캔버스의 y 좌표
- canvas_width : 캔버스 위에 그려질 이미지의 넓이
- canvas_height : 캔버스 위에 그려질 이미지의 높이

drawImage(img ,ix,iy,iw,ih,cx, cy,cw,ch)

- img : 이미지 객체
- ix : 이미지 내에 있는 x 좌표
- iy : 이미지 내에 있는 y 좌표
- iw : 이미지 내에 있는 (x,y)를 중심으로 그려질 넓이
- ih: 이미지 내에 있는 (x,y)를 중심으로 그려질 높이
- cx : 캔버스의 x 좌표
- cy : 캔버스의 y 좌표
- cw : 캔버스 위에 그려질 이미지의 넓이
- ch : 캔버스 위에 그려질 이미지의 높이

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

<! DOCTYPE html>

<head>

</head>

<body>

var canvas = document. getElementById ( "tcanvas" );

var context = canvas. getContext ( "2d" );

1

var img = new Image (); //이미지 객체 생성

img. src = "code.jpg" ; //code.jpg라는 이미지 파일을 로딩 시작

img. onload = function () //이미지 로딩 완료시 실행되는 함수

{

//(20,20)을 중심으로 100*100의 사이즈로 이미지를 그림 context. drawImage (img,20,20,100,100)

}

var canvas_two = document. getElementById ( "tcanvas_two" );

var context_two = canvas_two. getContext ( "2d" );

2

var img_two = new Image (); //이미지 객체 생성

img_two. src = "code.jpg" ; //code.jpg라는 이미지 파일을 로딩 시작

img_two. onload = function () //이미지 로딩 완료시 실행되는 함수

{

//이미지 비트맵에서 (30,30)을 중심으로 100*100 크기의 영역을

캔버스에 전체에 그림

context. drawImage (img_two,30,30,100,100,0,0

,canvas_two.width,canvas_two.height)

}

</script>

</body>

</html>

결과 화면

코드 설명

1

context. drawImage (img,20,20,100,100);

이미지를 캔버스에 그리기 위해서는 사전 작업이 필요합니다
먼저는 new Image 로 이미지 객체를 생성하게 됩니다.
그리고 이 후에 src로 이미지 파일을 로딩 시켜서 onload라는 메소드를 통해 이미지를 다 로딩을 하게 되면 그 이후에 실행할 내용을 정해줍니다.
이 실행 할 곳에 drawImage라는 메소드를 통해서 이미지를 캔버스 위에 그릴 수 있습니다.

2

context. drawImage (img_two,30,30,100,100,0,0,two.width,two.height);

Imge 객체를 사용하면 이미지에서 특정 부분만을 지정하여 가져와서 그릴 수 있습니다.
위에서와 같이 이미지에서 30,30의 좌표에서 100*100 사이즈에 해당하는 이미지를 가져왔습니다.
그리고 이 이미지를 캔버스 넓이 * 캔버스 높이 크기인 전체 크기에 표시하도록 하였습니다.
이와 같이 이미지에서 자신이 원하는 일정 부분만을 가져와서 표시가 가능한 것을 확인할 수 있습니다.