HTML Canvas 교재

HTML <canvas> 요소는 웹 페이지에서 그래픽을 그리는 데 사용됩니다.

위의 그림은 <canvas>로 만들어졌습니다。

그림을 네 가지 요소로 보여줍니다: 빨간 사각형, 그레이드 사각형, 다색 사각형 및 다색 텍스트。

HTML Canvas는 무엇인가요?

HTML <canvas> 요소는 스크립트(대부분 JavaScript)를 통해 동적으로 그래픽을 그리기 위해 사용됩니다。

<canvas> 요소는 단순한 그래픽의 컨테이너입니다. 실제 그래픽을 그리기 위해 스크립트(대부분 JavaScript)를 사용해야 합니다。

Canvas는 경로, 사각형, 원, 텍스트를 그리고 이미지를 추가하는 데 사용할 수 있는 여러 가지 메서드를 가지고 있습니다。

HTML Canvas는 텍스트를 그릴 수 있습니다

Canvas는 색상을 가진 텍스트를 그릴 수 있으며, 애니메이션 효과도 추가할 수 있습니다。

HTML Canvas는 그래픽을 그릴 수 있습니다

Canvas는 그래픽과 차트를 사용하여 데이터를 시각화하는 강력한 능력을 가지고 있습니다。

HTML Canvas는 애니메이션화될 수 있습니다

Canvas 객체는 이동할 수 있습니다. 모든 것이 가능합니다: 간단한 떠오르는 공에서 복잡한 애니메이션까지。

HTML Canvas는 상호작용 가능

Canvas는 JavaScript 이벤트에 응답할 수 있습니다。

Canvas는 어떤 사용자 작업(키 클릭, 마우스 클릭, 버튼 클릭, 손가락 움직임)에도 응답할 수 있습니다。

HTML Canvas는 게임에 사용될 수 있습니다

Canvas의 애니메이션 메서드는 HTML 게임 애플리케이션에 많은 가능성을 제공합니다。

Canvas 예제

HTML에서 <canvas> 요소는 이렇게 보입니다：

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

<canvas> 요소는 id 속성이 있어야 JavaScript가 참조할 수 있습니다。

width와 height 속성은 캔버스 크기를 정의하는 데도 필수적입니다。

안내: 하나의 HTML 페이지에 여러 개의 <canvas> 요소가 있을 수 있습니다。

기본적으로, <canvas> 요소는 테두리도 내용도 없습니다。

봉투를 추가하려면 style 속성을 사용하세요：

예제

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

직접 시도해 보세요

다음 장에서는 캔버스에서 그리는 방법을 설명합니다。

추가로 참조하십시오：

CodeW3C.com의 완전한 Canvas 참조 매뉴얼

브라우저 지원

<canvas> 요소는 HTML5 표준 (2014)입니다。

모든 현대 브라우저는 <canvas>를 지원합니다：