티스토리 뷰

[개발]프로그래밍/html5

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

좋은 블로그 2021. 3. 4. 10:36
1. 개념
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 : 캔버스 위에 그려질 이미지의 높이
2. 태그
drawImage
html5 코드
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>
<html lang = "kr" >
<head>
<meta charset = "utf-8" >
<title> 키보드와 하루 </title>
</head>
<body>
<canvas id = "tcanvas" width = "300" height = "200" style =' border : 1px solid #000 '; > </canvas>
<canvas id = "tcanvas_ two" width = "300" height = "200" style =' border : 1px solid #000 '; > </canvas>
<script>
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 사이즈에 해당하는 이미지를 가져왔습니다.
그리고 이 이미지를 캔버스 넓이 * 캔버스 높이 크기인 전체 크기에 표시하도록 하였습니다.
이와 같이 이미지에서 자신이 원하는 일정 부분만을 가져와서 표시가 가능한 것을 확인할 수 있습니다.
저작자표시

'[개발]프로그래밍 > html5' 카테고리의 다른 글

[html5] mouseEvent - canvas에서 자유롭게 선 그리기  (0) 2021.03.05
[html5] strokeText,fillText - canvas에 텍스트 그리기  (0) 2021.03.03
[html5] rect,strokeRect - canvas에 사각형 그리기  (0) 2021.03.02
[html5] arc - canvas에서 원 그리기  (0) 2021.02.26
[html5] canvas - 선 ,도형 그리기 및 채우기  (0) 2021.02.25
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday