프리랜서 웹디자이너 웹퍼블리셔RELATION

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 이벤트에서 이 함수를 사용하는 것이 일반적입니다.

 


 


 



 



 

이 포스트 공유하기

전체목록