HTML5-캔버스

HTML5 요소 <canvas>는 JavaScript를 사용하여 그래픽을 그리는 쉽고 강력한 방법을 제공합니다. 그래프를 그리거나 사진 구성을 만들거나 간단한 (그렇지 않은) 애니메이션을 만드는 데 사용할 수 있습니다.

다음은 두 개의 특정 속성 만있는 간단한 <canvas> 요소입니다. width 과 height 그리고 id, name, class 등과 같은 모든 핵심 HTML5 속성을 포함합니다.

<canvas id = "mycanvas" width = "100" height = "100"></canvas>

다음과 같이 getElementById () 메소드를 사용하여 DOM에서 <canvas> 요소를 쉽게 찾을 수 있습니다.

var canvas = document.getElementById("mycanvas");

HTML5 문서에서 <canvas> 요소를 사용하는 간단한 예를 살펴 보겠습니다.

<!DOCTYPE HTML>

<html>
   <head>
   
      <style>
         #mycanvas{border:1px solid red;}
      </style>
   </head>
   
   <body>
      <canvas id = "mycanvas" width = "100" height = "100"></canvas>
   </body>
</html>

이것은 다음 결과를 생성합니다-

렌더링 컨텍스트

<canvas>는 처음에는 비어 있으며 무언가를 표시하려면 먼저 스크립트가 렌더링 컨텍스트에 액세스하여 그 위에 그려야합니다.

캔버스 요소에는 다음과 같은 DOM 메소드가 있습니다. getContext, 렌더링 컨텍스트 및 해당 그리기 기능을 가져 오는 데 사용됩니다. 이 함수는 컨텍스트 유형 인 하나의 매개 변수를 사용합니다.2d.

다음은 브라우저가 <canvas> 요소를 지원하는지 확인과 함께 필요한 컨텍스트를 얻는 코드입니다.

var canvas  = document.getElementById("mycanvas");

if (canvas.getContext) {   
   var ctx = canvas.getContext('2d');   
   // drawing code here   
} else {   
   
   // canvas-unsupported code here 
}

브라우저 지원

최신 버전의 Firefox, Safari, Chrome 및 Opera는 모두 HTML5 Canvas를 지원하지만 IE8은 캔버스를 기본적으로 지원하지 않습니다.

ExplorerCanvas 를 사용 하여 Internet Explorer를 통해 캔버스를 지원할 수 있습니다 . 다음과 같이이 JavaScript를 포함하면됩니다.

<!--[if IE]><script src = "excanvas.js"></script><![endif]-->

HTML5 Canvas 예

이 자습서에서는 HTML5 <canvas> 요소와 관련된 다음 예제를 다룹니다.

Sr. 아니.	예 및 설명
1	직사각형 그리기 HTML5 <canvas> 요소를 사용하여 직사각형을 그리는 방법 알아보기
2	드로잉 경로 HTML5 <canvas> 요소의 경로를 사용하여 도형을 만드는 방법 알아보기
삼	선 그리기 HTML5 <canvas> 요소를 사용하여 선을 그리는 방법 알아보기
4	베 지어 그리기 HTML5 <canvas> 요소를 사용하여 베 지어 곡선을 그리는 방법 알아보기
5	2 차 그리기 HTML5 <canvas> 요소를 사용하여 2 차 곡선을 그리는 방법 알아보기
6	이미지 사용 HTML5 <canvas> 요소로 이미지를 사용하는 방법 알아보기
7	그라디언트 만들기 HTML5 <canvas> 요소를 사용하여 그라디언트를 만드는 방법 알아보기
8	스타일과 색상 HTML5 <canvas> 요소를 사용하여 스타일과 색상을 적용하는 방법 알아보기
9	텍스트 및 글꼴 다양한 글꼴과 크기를 사용하여 놀라운 텍스트를 그리는 방법을 알아보십시오.
10	패턴과 그림자 다양한 패턴을 그리고 그림자를 그리는 방법을 배웁니다.
11	캔버스 상태 캔버스에서 복잡한 그림을 그리는 동안 캔버스 상태를 저장하고 복원하는 방법을 알아 봅니다.
12	캔버스 번역 이 방법은 캔버스와 원점을 그리드의 다른 지점으로 이동하는 데 사용됩니다.
13	캔버스 회전 이 방법은 현재 원점을 중심으로 캔버스를 회전하는 데 사용됩니다.
14	캔버스 스케일링 이 방법은 캔버스 그리드에서 단위를 늘리거나 줄이는 데 사용됩니다.
15	캔버스 변환 이러한 방법을 사용하면 변환 매트릭스를 직접 수정할 수 있습니다.
16	캔버스 구성 이 방법은 캔버스에서 특정 영역을 가리거나 부분을 지우는 데 사용됩니다.
17	캔버스 애니메이션 HTML5 Canvas 및 JavaScript를 사용하여 기본 애니메이션을 만드는 방법을 알아 봅니다.