예제 11-9. 캔버스의 (20,20)에서 100 X 200 크기로 변형하여 이미지 그리기. 예제 11-10. 캔버스에 꽉 차게 이미지 그리기
WEB/JAVASCRIPT-CONCEPT 2017. 11. 4. 12:30 |3. 이미지 그리기
* 이미지 객체 생성
캔버스에 이미지를 그리기 위해서는 이미지를 담을 이미지 객체가 필요하다.
var img = new Image();
* 이미지 로딩과 onload
1 2 3 4 5 | img.onload = function() // 이미지 로딩이 완료되면 함수 코드 실행 { ... // 이곳에 img 객체에 로드된 이미지를 그리는 코드 작성 } img.src = "test.png"; // img 객체에 test.png 파일로부터 이미지 로딩 시작 | cs |
이미지 로딩이 완료되어야 이미지를 그릴 수 있으므로, 이미지 로딩을 지시하기 전
img.onload 리스너에 이미지가 로딩되었을 때 이미지를 그리는 자바스크립트 코드를 등록해둔다.
* 이미지 그리기
이미지 로딩이 완료되면 컨텍스트 객체의 drawImage() 메소드를 이용하여 이미지를 그린다.
drawImgage()는 다음 몇 가지 유형이 있다.
- 원본 크기로 그리기
원본 이미지 크기 그대로 그리는 drawImage()는 다음과 같다
1 2 3 | drawImage(img, dx, dy) img : 이미지 객체 dx, dy : 이미지가 그려질 캔버스 좌표 (dx, dy) | cs |
img 객체에 든 비트맵 이미지를 원본 크기로 캔버스의 (dx, dy) 위치에 그린다
- 크기 조절하여 그리기
원본 이미지의 크기를 조절하여 그리는 drawImage()는 다음과 같다
1 2 | drawImage(img, dx, dy, dWidth, dHeight) dWidth, dHeight : 이미지가 그려지는 크기, dWidth X dHegiht | cs |
img 객체의 비트맵 이미지를 캔버스의 (dx, dy) 위치에 dWidthxdHegiht 크기로 변형하여 그린다.
- 원본의 일부분을 크기 조절하여 그리기
원본 이미지의 일부분을 택하고 크기를 조절하여 그리는 drawImage()는 다음과 같다
1 2 3 | drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) sx, sy : img 이미지 내 비트맵 좌표 (sx, sy) sWidth, sHeight : 그리기 위해 선택한 img 내의 비트맵 크기, sWidth X sHeight | cs |
img 이미지 내부의 (sx, sy) 위치에서 sWidth X sHeight 영역의 비트맵을,
캔버스의 (dx, dy) 위치에 dWidth X dHeight 크기로 변형하여 그린다.
* 이미지 그리기 사례
- (20,20) 위치에 원본 크기로 그리기
캔버스의 (20,20)에 test.png 이미지를 원본 크기로 그리는 코드는 다음과 같다
1 2 3 4 5 6 | var img = new Image(); img.onload = function() // 이미지 로딩이 완료되면 실행되는 함수 { context.drawImage(img,20,20); // img의 비트맵 이미지를 (20,20)에 원본 크기로 그린다. } img.src = "test.png"; //이미지 로딩을 시작시킨다 | cs |
- (20,20) 위치에 100 X 200 크기로 그리기
캔버스의 (20,20) 위치에 test.png 이미지를 100 X 200 크기로 그리는 코드는 다음과 같다
1 2 3 4 5 6 | var img = new Image(); img.onload = function() // 이미지 로딩이 완료되면 실행되는 함수 { context.drawImage(img,20,20,100,200); // img를 (20,20)에 100X200 크기로 그린다. } img.src = "test.png"; //이미지 로딩을 시작시킨다 | cs |
- 캔버스에 꽉 차게 이미지 그리기
캔버스의 크기는 canvas.width와 canvas.height로 알아낼 수 있다.
이들을 이용하여 캔버스에 꽉 차도록 test.png 이미지를 그리는 코드는 다음과 같다
1 2 3 4 5 6 | var img = new Image(); img.onload = function() // 이미지 로딩이 완료되면 실행되는 함수 { context.drawImage(img,0,0,canvas.width,canvas.height); } img.src = "test.png"; //이미지 로딩을 시작시킨다 | cs |
예제 11-9. 캔버스의 (20,20)에서 100 X 200 크기로 변형하여 이미지 그리기.
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 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>(20, 20)에 100x200 크기로 그리기</title> </head> <body> <h3>(20, 20)에 100x200 크기로 그리기</h3> <hr> <canvas id="myCanvas" style="background-color:aliceblue" width="300" height="250"></canvas> <script> var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var img = new Image(); img.onload = function () { context.drawImage(img, 20, 20, 100, 200); } img.src = "media/elsa.png"; </script> </body> </html> | cs |
예제 11-10. 캔버스에 꽉 차게 이미지 그리기
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 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>캔버스에 꽉 차게 이미지 그리기</title> </head> <body> <h3>캔버스에 꽉 차게 이미지 그리기</h3> <hr> <canvas id="myCanvas" style="background-color:aliceblue" width="500" height="300"></canvas> <script> var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var img = new Image(); img.onload = function () { context.drawImage(img, 0, 0, canvas.width, canvas.height); } img.src = "media/elsa.png"; </script> </body> </html> | cs |
'WEB > JAVASCRIPT-CONCEPT' 카테고리의 다른 글
| 예제 13-1. 오디오와 비디오를 가진 웹 페이지. 예제 13-2. 자바스크립트로 오디오 제어기 만들기. 예제 13-3. 비디오를 원본 크기로 재생. 예제 13-4. 오디오 재생이 끝나면 웹 페이지를 노란색으.. (0) | 2017.11.04 |
|---|---|
| 예제 11-11. 마우스 드래깅으로 캔버스에 그림 그리기 (2) | 2017.11.04 |
| 예제 11-8. 텍스트 그리기 (0) | 2017.11.03 |
| 예제 11-6. 선의 색과 굵기. 예제 11-7. 칠하기 (0) | 2017.11.03 |
| 예제 11-5. 사각형 그리기 (0) | 2017.11.03 |