WebGL-Html5 Canvas 개요

웹에서 그래픽 응용 프로그램을 만들기 위해 HTML-5는 2D Canvas, WebGL, SVG, 3D CSS 변환 및 SMIL과 같은 다양한 기능을 제공합니다. WebGL 애플리케이션을 작성하기 위해 HTML-5의 기존 canvas 요소를 사용합니다. 이 장에서는 HTML-5 2D 캔버스 요소에 대한 개요를 제공합니다.

HTML5 캔버스

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

여기에 간단한 <canvas> 두 개의 특정 속성 만있는 요소 width 과 height 그리고 id, name, class와 같은 모든 핵심 HTML-5 속성을 포함합니다.

통사론

HTML 캔버스 태그의 구문은 다음과 같습니다. 큰 따옴표 ( "") 안에 캔버스 이름을 언급해야합니다.

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

캔버스 속성

canvas 태그에는 id, width 및 height라는 세 가지 속성이 있습니다.

Id− Id는 DOM (Document Object Model) 에서 캔버스 요소의 식별자를 나타냅니다 .
Width − 너비는 캔버스의 너비를 나타냅니다.
Height − 높이는 캔버스의 높이를 나타냅니다.

이러한 속성은 캔버스의 크기를 결정합니다. 프로그래머가 캔버스 태그 아래에 지정하지 않으면 Firefox, Chrome 및 Web Kit와 같은 브라우저는 기본적으로 300 × 150 크기의 캔버스 요소를 제공합니다.

예-캔버스 만들기

다음 코드는 캔버스를 만드는 방법을 보여줍니다. CSS를 사용하여 캔버스에 컬러 테두리를 제공했습니다.

<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.

다음 코드는 필요한 컨텍스트를 얻기 위해 작성됩니다. 아래와 같이 body 태그 안에이 스크립트를 작성할 수 있습니다.

<!DOCTYPE HTML>
<html>
   <body>
      <canvas id = "mycanvas" width = "600" height = "200"></canvas>

      <script>
         var canvas = document.getElementById('mycanvas');
         var context = canvas.getContext('2d');
			
         context.font = '20pt Calibri';
         context.fillStyle = 'green';
         context.fillText('Welcome to Tutorialspoint', 70, 70);
      </script>
   </body>
</html>

실행시 위의 코드는 다음과 같은 출력을 생성합니다.

HTML-5 2D Canvas에 대한 더 많은 예를 보려면 다음 링크 HTML-5 Canvas를 확인하십시오 .

WebGL 컨텍스트

HTML5 Canvas는 WebGL 응용 프로그램을 작성하는데도 사용됩니다. 캔버스 요소에 WebGL 렌더링 컨텍스트를 생성하려면 문자열을 전달해야합니다.experimental-webgl, 대신에 2d ~로 canvas.getContext()방법. 일부 브라우저는 'webgl'.

<!DOCTYPE html>
<html>
   <canvas id = 'my_canvas'></canvas>
	
   <script>
      var canvas = document.getElementById('my_canvas');
      var gl = canvas.getContext('experimental-webgl');
      gl.clearColor(0.9,0.9,0.8,1);
      gl.clear(gl.COLOR_BUFFER_BIT);
   </script>
</html>

실행시 위의 코드는 다음과 같은 출력을 생성합니다.