본문 바로가기

HTML5

W3Schools HTML5 튜토리얼 (한글) -7

W3Schools HTML5 튜토리얼

HTML5 홈
HTML5 소개
HTML5 새 엘리먼트 (Elements)
HTML5 비디오 (Video)
HTML5 비디오/Dom (Video/DOM)
HTML5 오디오 (Audio)
HTML5 캔버스 (Canvas)
HTML5 웹 저장공간 (Web Storage)

HTML5 폼 (Forms)

HTML5 입력타입 (Input Types)
HTML5 폼 엘리먼트 (Form Elements)
HTML5 폼 속성 (Form Attributes)

HTML5 참조목록 (Reference)

HTML5 태그 (Tags)
HTML5 속성 (Attributes)
HTML5 이벤트 (Events)
HTML5 2D 캔버스 (Canvas 2d)
HTML 유효 DTD (Valid DTDs)



The canvas element is used to draw graphics on a web page.

Your browser does not support the canvas element.



캔버스가 뭐에요?

HTML5 캔버스 엘리먼트는 웹페이지에 그래픽을 그리기 위해 자바스크립트를 사용합니다.

하나의 캔버스는 사각형구역이며 당신은 그 픽셀 하나하나를 제어할수있습니다.

캔버스 엘리먼트는 그려지는 경로, 박스, 원, 글자 그리고 추가적인 이미지들을 위한 몇개의 메소드를 가지고 있습니다.
 


캔버스 엘리먼트 만들기

HTML5 페이지에 캔버스 엘리먼트를 추가려면 다음과 같이 엘리먼트의 폭, 넓이, 아이디를 기술합니다:

<canvas id="myCanvas" width="200" height="100"></canvas>



자바스크립트로 그리기

캔버스 엘리먼트는 스스로 무언가를 그릴수없습니다. 모든 그리기 작업은 자바스크립트를 통해서만 가능합니다:

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>

직접 해보기 »

자바스크립트는 아이디값으로 캔버스 엘리먼트를 찾습니다:

var c=document.getElementById("myCanvas");

그 다음 컨텍스트 객체를 만듭니다:

var ctx=c.getContext("2d");

getContext("2d") 객체는 내장된 HTML5 객체로서 그리기 경로, 박스, 원, 글씨, 이미지 등등의 많은 메소드를 가지고 있습니다.

다음의 두줄로 빨간색 사각형을 그릴수있습니다:

ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

fillStyle 메소드로 빨간색을 만들고 fillRect 메소드로 모양, 위치, 크기를 정합니다.



좌표 이해하기

위의 fillRect 메소드는 (0,0,150,75) 파라메터를 가지고 있습니다.

이것은 캔버스의 좌측상단 0, 0 에서 시작하는 150x75 크기의 사각형을 그리라는 의미입니다.

캔버스의 X와 Y의 좌표는 캔버스의 그리기 위치를 정하는데 쓰입니다.

좌표를 보려면 밑의 사각형에 마우스를 대보세요:

X
Y











캔버스 예제 더보기

캔버스 엘리먼트의 그리기 예제들입니다:

예제 - 선 (Line)

출발점과 종료점을 명시하여 선을 그립니다:


직접 해보기 »

예제 - 원 (Circle)

크기, 색깔, 위치를 지정하여 원을 그립니다:


직접 해보기 »

예제 - 그라디언트 (Gradient)

지정하는 색의 그라디언트 배경 그립니다:


직접 해보기 »

예제- 이미지 (Image)

캔버스에 이미지를 삽입합니다:


직접 해보기 »



HTML5 <canvas> 태그

태그설명
<canvas> 그래픽을 정의함

캔버스 2차원 (Canvas 2d) 참고자료

캔버스 객체에서 사용되는 모든 속성과 메소드에 관한 완전한 참고자료는 다음의 사이트를 방문해보세요.
complete canvas 2d reference.