HTML 캔버스 튜토리얼

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

위의 그래픽은 <canvas>로 제작되었습니다.

빨간색 사각형, 그래디언트 사각형, 다중 색상 사각형 및 다중 색상 텍스트의 네 가지 요소가 표시됩니다.

HTML 캔버스란 무엇입니까?

HTML <canvas> 요소는 스크립팅(일반적으로 JavaScript)을 통해 즉석에서 그래픽을 그리는 데 사용됩니다.

<canvas> 요소는 그래픽을 위한 컨테이너일 뿐입니다. 실제로 그래픽을 그리려면 스크립트를 사용해야 합니다.

Canvas에는 경로, 상자, 원, 텍스트를 그리고 이미지를 추가하는 여러 가지 방법이 있습니다.

브라우저 지원

표의 숫자는 <canvas> 요소를 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.

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

Canvas는 애니메이션이 있거나 없는 다채로운 텍스트를 그릴 수 있습니다.

HTML 캔버스는 그래픽을 그릴 수 있습니다

Canvas에는 그래프와 차트의 이미지가 포함된 그래픽 데이터 프레젠테이션을 위한 훌륭한 기능이 있습니다.

HTML 캔버스에 애니메이션을 적용할 수 있음

캔버스 개체는 이동할 수 있습니다. 단순한 튀는 공부터 복잡한 애니메이션까지 모든 것이 가능합니다.

HTML 캔버스는 인터랙티브할 수 있습니다.

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

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

HTML 캔버스는 게임에서 사용할 수 있습니다

Canvas의 애니메이션 방법은 HTML 게임 응용 프로그램에 많은 가능성을 제공합니다.

캔버스 예

HTML에서 <canvas> 요소는 다음과 같습니다.

<canvas> 요소에는 JavaScript에서 참조할 수 있도록 id 속성이 있어야 합니다.

너비와 높이 속성은 캔버스의 크기를 정의하는 데 필요합니다.

팁: 하나의 HTML 페이지에 여러 <canvas> 요소를 가질 수 있습니다.

테두리를 추가하려면 스타일 속성을 사용하세요.

다음 장에서는 캔버스에 그리는 방법을 보여줍니다.