1. 이미지 객체 생성
var img = new Image();
2. 이미지 로딩과 onload
img.onload = function() { //이미지 로딩이 완료되면 함수 코드 실행
... //img 객체에 로드된 이미지를 그리는 코드 작성
}
img.src = "test.png"; //img 객체에 해당 파일로부터 이미지 로딩 시작
3. 이미지 그리기 : drawImage()
- 원본 크기로 그리기
drawImage(img, dx, dy)
- img : 이미지 객체
- dx, dy : 이미지가 그려질 캔버스 좌표
- 크기 조절하여 그리기
drawImage(img, dx, dy, dWidth, dHeight)
- dWidth, dHeight : 이미지가 그려지는 크기
- 원본의 일부분을 크기 조절하여 그리기
drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
- sx, sy : 이미지 내 비트맵 좌표
- sWidth, sHeight : 그리기 위해 선택한 img 내의 비트맵 크기
<예시>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
'JavaScript > 6. HTML5 캔버스 그래픽' 카테고리의 다른 글
| Day 49 : Exercise (0) | 2021.12.24 |
|---|---|
| Day 49 : canvas 객체와 마우스 이벤트 활용 (0) | 2021.12.24 |
| Day 49 : 도형 그리기와 채우기 (0) | 2021.12.24 |
| Day 49 : HTML5와 캔버스 (0) | 2021.12.24 |