캔버스에서 이미지를 그리는 것은 이미지 데이터를 읽어서 캔버스에 일일이 그리는 것 처럼 텍스트, 선 또는 원을 그리는 방식과 비슷하다.
그러니까..선을 그리는 것이나 이미지를 그리는 것이나 같다라는 점 이다.
일단 이미지를 그려보기 위해서 이미지를 제작하였다.(파워포인트로..)
요 이미지를 가져와서 캔버스에 적용하는 것은 Image라는 객체를 사용하여 실시 하였다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Canvas</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<style>
body{padding: 5%;text-align: center;}
canvas{border: 1px solid gray;border-radius: 3px;}
</style>
<body>
<canvas width='800' height='400' id='canvas' ></canvas>
</body>
</html>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
var img = new Image(); // Create new img element
img.src = 'img/back.png';
img.onload = function() {
ctx.drawImage(img, 0, 0);
};
</script>
이미지내용이 불러와지면 캔버스에 그리기 행위를 실시 하였다.
drawImage라는 함수의 첫번째 값은 이미지 객체, 두번째는 x좌표, 세번째는 y좌표이다.
위 이미지를 불러와서 그림을 그리면 아래모양처럼 나온다.
뭔가 이미지를 그렸는데..사이즈가 안맞으니 속상하다.
이럴때는 drawImage에서 네번째와 다섯번째에 이미지가 그려질 사이즈를 지정하면 된다!
아래 스크립트를 교체하여보자.
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
var img = new Image(); // Create new img element
img.src = 'img/back.png';
img.onload = function() {
ctx.drawImage(img, 0, 0, 800,400);
};
다섯번째와 여섯번째에 값을주게되면 사이즈가 맞추어져서 나온다.
위 코드는 이미지를 가져와서 넓이 800에 높이 400을 맞추라고 한 내용이다.
그러니까...시작점 0,0에서 넓이 800에 높이 400을 가지고 이미지를 그리라고 한 것 이다.
800과 400은 지금 캔버스의 크기이다.
이러한 부분은 나중에 스크립트나 Jquery를 통해서 만들어도 상관없다.
요렇게 이미지가 그려진뒤에 다른 선, 원, 사각형도 기존방식대로 작성하면 무난하게 그려진다.
한번...선을그려보자.
스크립트를 아래와같이 수정하여보자.
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.strokeStyle = 'red';
ctx.lineWidth = 10;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
var img = new Image(); // Create new img element
img.src = 'img/back.png';
img.onload = function() {
ctx.drawImage(img, 0, 0, 800,400);
ctx.beginPath();
ctx.moveTo(300, 300);
ctx.lineTo(90,100);
ctx.lineTo(150, 100);
ctx.lineTo(90,100);
ctx.lineTo(90,160);
ctx.stroke();
};
요렇게 하고나면..이미지를 그린 뒤에 선을 그리는 행위를 하게 된다.
마찬가지로 이미지를 캔버스에 그리게되면 캔버스에 별도의 속성, 배경이 생기는 것이 아니라 선과 원, 사각형 처럼 캔버스 1개에 그리는 효과를 나타나게된다.
뭔소리냐면..
이미지를 그리는 행위 = 선 및 도형을 그리는 행위 라고 생각하면된다.
쉬운 이해를 통해서 아래 애니메이션을 통해서 기능을 살펴보자.
여태껏 언급하지 않았던 clearRect를 활용하여 애니메이션 효과를 주어보자.
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.strokeStyle = 'red';
ctx.lineWidth = 10;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
var img = new Image(); // Create new img element
img.src = 'img/back.png';
img.onload = function() {
loop();
};
var num = 1;
function loop(){
setInterval(() => {
ctx.clearRect(0,0,800,400);
ctx.drawImage(img, 0, 0, 800,400);
ctx.beginPath();
ctx.moveTo(300+num, 300);
ctx.lineTo(90+num,100);
ctx.lineTo(150+num, 100);
ctx.lineTo(90+num,100);
ctx.lineTo(90+num,160);
ctx.stroke();
num++;
}, 100);
}clearRect라는 함수는 x좌표, y좌표, 넓이, 높이 만큼 캔버스를 지우는 역할을 한다.
따라서 위 코드를 실행하면,
1. 화면을 지우고
2. 이미지를 그리고
3. 선을 그리고
4. num 값을 증가시키고
위 4단계가 0.1초씩 진행이된다.
이러한 단계가 0.1초씩 반복되면 마치 선이 움직이는 효과를 볼 수 있게 되는 것 이다.
0.1초씩 지우고 다시그리고가 반복되면 아래 사진처럼 나오게 된다.
위 사진을 보면 선이 움직이는 것 처럼 보이지만,
실제로는 지우고, 이미지그리고, 선 그리고 행위가 0.1초 단위로 계속해서 움직이는 것 이다.
만약 이미지를 배경으로 사용할 예정이라면 css style 속성에서 background에 이미지 속성으로 배경효과를 주도록 하자.
굳이 이미지를 계속해서 그릴필요는 없으니까..배경이라면~
아무튼..이런식으로 이미지를 불러와 캔버스에서 그릴수 있다는 점 이다.
또한 캔버스에서는 9개의 파라미터를 입력하면 좀 더 멋진 효과를 낼 수 있다.
drawImage(이미지, 자르기를시작할 x좌표, 자르기를시작할 y좌표, 자를넓이, 자를높이, 이미지를 그릴x좌표, 이미지를 그릴 y좌표, 넓이, 높이);
전달해야 값 형태는 크게 3가지로 구분된다.
필요시에 아래형태로 잘라내어 사용하면 된다.
1. 이미지
2. 이미지를 자를 요소 (x좌표, y좌표, 넓이, 높이)
3. 이미지를 그릴 요소 (x좌표, y좌표, 넓이, 높이)
정리하여보자!
1. drawImage를 통해서 이미지를 그릴 수 있다.
2. drawImage는 3가지 형태로 사용가능 하다.
1) drawImage(이미지, x, y)
2) drawImage(이미지, x, y, 넓이, 높이)
3) drawImage(이미지, 자를 x, 자를 y, 자를 넓이, 자를 높이, x, y, 넓이, 높이)
3. clearRect는 캔버스를 지우는 지우개 역할을 한다.
1) clearRect(x, y, 넓이, 높이)
다음번에는 transformation을 통해서 좌표 사용법에 대해서 알아보도록 하자.
'Html 캔버스 > Html 캔버스 튜토리얼 (내가만든 차트!)' 카테고리의 다른 글
| Html Canvas (Html 캔버스) 튜토리얼 (차트만들기!) - 8 : 확대와 영역 (0) | 2020.02.07 |
|---|---|
| Html Canvas (Html 캔버스) 튜토리얼 (차트만들기!) - 7 : 좌표 심화 (0) | 2020.02.06 |
| Html Canvas (Html 캔버스) 튜토리얼 (차트만들기!) - 5 : 좌표 (0) | 2020.01.31 |
| Html Canvas (Html 캔버스) 튜토리얼 (차트만들기!) - 4 : 선 그리기2 (0) | 2020.01.31 |
| Html Canvas (Html 캔버스) 튜토리얼 (차트만들기!) - 3 : 선 그리기1 (0) | 2020.01.30 |
댓글