프리랜서 웹디자이너 RELATION RELATION.CO.KR

RELATION 로고

홈페이지 소스

[HTML] HTML5 Canvers 태그

2019.03.22
HTML5 에서는 브라우저에 도형을 그리거나 이것을 움직이거나 하는 일들을 할 수 있습니다.
이름에서 알 수 있듯이 그림 그릴 때 사용하는 캔버스처럼 브라우저에 캔버스를 놓고 그 캔버스 위에 그림을 그리는 것입니다.
HTML5에서는 이 Canvas라는 판만 깔고 실제 그림 그리는 작업은 JavaScript 에서 한다고 보시면 됩니다.

캔버스의 기본적인 사용방법
1. 캔버스객체를 얻는다.
캔버스 기능을 이용하려면 HTML 내에 다음과 같이 태그를 추가합니다.
이때 자바스크립트에서 태그를 참조하기 위해 태그에 ID를 부여해 둡니다.

2. 캔버스객체로부터 렌더링 컨텍스트(rendering context)를 얻는다.
-실제로 렌더링 하기 위해서는 캔버스 객체로부터 렌더링 컨텍스트를 얻을 필요가 있습니다. 여기서 캔버스는 종이이고, 렌더링 컨텍스트는 종이에 그림을 그리기 위한 색연필과 같다고 보면 된다.
- 캔버스 객체로부터 렌더링 컨텍스트를 얻어 변수 ctx에 저장하려면 다음과 같이 합니다.
- 컨텍스트의 종류,'2d' 이차원 그림을 의미합니다.
ex) var ctx =canvas.getContext("2d")

3. 컨텍스트의 메서드 혹은 속성을 이용하여 렌더링 한다.
- 컨텍스트를 얻었다면 렌더링 메서드를 호출하여 도형을 그립니다.
- 색 지정 방법 HTML 방식 : ctx.fillStyle="#f00000"; RGB 방식 : ctx.fillStyle="rgb(255,0,0)"; RGB + 투명도방식 : ctx.fillStyle="rgba(255,0,0)";
- 좌표 지정 방법 컨버스의 좌표의 기준 : 왼쪽 위가 (0,0)
- 패스 렌더링 관련 메서드
beginPath() 패스 지정을 초기화 한다.
lineWidth 패스 선의 굵기를 지정한다.
closePath() 현재 까지 지정한 패스를 닫는다.
line(x,y) 이전 렌더링 위치에서 (x,y)로 선을 긋는다.
stroke() 패스(테드리)를 렌더링 한다 fill()패스 내부를 채운다.
fillStyle패스 내부를 채운다.
strokeStyle()패스 선의 색 및 스타일을 지정한다.

  데모보기


 

캔버스(canvas) 패스(Path) 사용하기
캔버스의 패스(Path)기능은 HTML5에서 새로 추가된 기능인데요, 쉽게 말해 패스(Path)는 좌표를 정해주면 그 좌표대로
도형이나 문자 또는 등이 그려지는 것을 말합니다.

패스 그리는 순서
1. 패스 그리기 시작을 알립니다.
beginPath()함수를 이용해 canvas에 패스 그리기를 알립니다.
- context.beginPath();

2. 경로지정
moveTo(x,y) 함수로 패스의 시작점을 지정하고 lline(x,y) 함수로 패스가 이어질 점을 지정합니다.
- context.moveTo(50,10);
- context.lineTo(20,100);
- context.lineTo(80,100);
- context.lineTo(50,100);

3. 경로따라 실제 그리기 
이전과정까지는 패스 정보를 셋팅하는 것이며, 실제 지정된 패스를 따라 선을 그려야 하는데, 이는 stoke(), file()과 잉크(ink)함수가 사용됨
- context.stroke();
- context.file();

4. 패스닫기
closePath()는 패스를 명시적으로 닫는 역활을 합니다.
반드시 사용해야 하는 것은 아니지만 명시적으로 closePath()를 호출해 주면 마지막 패스의 좌표와 시작 좌표가를 자동으로 연결해 주기 때문에 편리합니다.

5. 이미지 택스트 그리기
캔버스에는 선이나 각종 도형 이외에도 이미지 파일을 삽입하거나 텍스트를 직접 그릴 수도 있습니다. 캔버스에 텍스트 그리기를 이용하면 글자에 각종 효과를 줄 수 있고, 이미지 역시 각종 이미지 처리를 할 수 있다는 장점이 있겠다

6.텍스트 그리기


7 이미지 그리기
drawImage 함수를 이용하여 캔버스에 이미지 파일을 삽입할 수 있습니다.
주의할 점은 drawImage의 호출 시점입니다. 이미지가 모두 로딩된 이후에 이 함수를 호출해야 합니다. 따라서 이미지 로딩이 완료될 때 발생하는 onload 이벤트에서 이 함수를 사용하는 것이 일반적입니다.

 


 


 



 



 

이 포스트 공유하기

글수정  글삭제 전체목록
<
 
1
           
검색    글쓰기
번호 제 목 작성자 작성일 조회수
중요 [소스] 기존 a 태그 href를 이용하여 부드럽게 스크롤 이동하기 작성글은 비공개로 설정 되었습니다. 꿘쓰 2017.02.10 73
중요 [기타] 구글맵 플랫폼 꿘쓰 2019.01.22 3517
중요 [소스] 구글맵 반경 검색 작성글은 비공개로 설정 되었습니다. 꿘쓰 2018.01.08 17
중요 [소스] 구글맵 이동 경로 표시 꿘쓰 2018.01.18 3523
중요 [소스] 구글맵 좌표값 구하기 꿘쓰 2019.01.08 2172
중요 [소스] 구글맵 웹사이트 띄우기  이미지 파일이 첨부되어 있습니다. 꿘쓰 2013.01.02 20768
227 [소스] 마우스 롤오버 효과 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.30 2
226 [기타] 퍼센트 계산, 백분율 계산 방식 꿘쓰 2020.06.22 59
225 [소스] Window.scroll() 꿘쓰 2020.06.22 63
224 [소스] scrollLeft(), scrollTop() 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.15 0
223 [소스] 숫자 카운트 1 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.03 1
222 [CSS] 그라데이션 자동 생성 사이트 꿘쓰 2020.05.29 95
221 [CSS] flex-wrap:wrap 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.05.29 0
220 [SCRIPT] 자바스크립트 number_format 숫자 콤마 제이쿼리 꿘쓰 2019.12.03 172
219 [소스] 구글 로그인 API 자바스크립트 꿘쓰 2019.08.16 326
218 [JQUERY] 체크박스 체크 유무 jquery 꿘쓰 2019.07.23 352
217 [CSS] css webkit, moz, ms, o 의미 꿘쓰 2019.04.16 519
216 [HTML] HTML5 Canvers 태그 꿘쓰 2019.03.22 617
215 [기타] 카카오 상담톡 비즈니스 메신져 꿘쓰 2019.03.21 589
214 [기타] a태그 onclick 클릭 이벤트 차이점 꿘쓰 2019.03.13 582
213 [소스] 카카오 로그인 작성글은 비공개로 설정 되었습니다. 꿘쓰 2019.03.08 1
212 [소스] 별점주기 꿘쓰 2019.02.21 688
211 [소스] Select option를 버튼(div) 방식으로 변경하기 꿘쓰 2019.02.21 673
210 [소스] 코멘트 게시판 디자인 이미지 테두리 둥글게 하기 (border-radius) 꿘쓰 2019.02.13 877
209 [소스] 아이폰 갤러리 이미지 저장 방지 꿘쓰 2019.01.09 627
208 [CSS] 줄바꿈, URL 줄바꿈을 위한 CSS 꿘쓰 2019.01.04 669