캔버스(Canvas) 기본 사용법

현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

<canvas> HTML 자체 요소를 보면서 이 튜토리얼을 시작해 보겠습니다. 이 페이지의 끝에서는, 2D 컨텍스트를 설정하는 방법과 첫 번째 예제를 당신의 브라우저에서 그려 넣는 방법을 알게 될것입니다.

<canvas> 요소

<canvas id="tutorial" width="150" height="150"></canvas>

처음 볼때 <canvas>는 src 및 alt 속성이 없다는 점만 제외하면 <img> 요소처럼 보입니다. 실제로 <canvas> 요소에는 widthheight의 두 속성만 있습니다. 이것들은 모두 선택사항이며 DOM 프로퍼티를 사용하여 설정할 수도 있습니다. width 및 height 속성을 지정하지 않으면 캔버스의 처음 너비는 300 픽셀이고 높이는 150 픽셀입니다. 요소는 CSS에 의해 임의로 크기를 정할 수 있지만 렌더링하는 동안 이미지는 레이아웃 크기에 맞게 크기가 조정됩니다. CSS 크기가 초기 캔버스의 비율을 고려하지 않으면 왜곡되어 나타납니다 .

노트: 만약 렌더링이 왜곡된 것처럼 보이는 경우 CSS를 사용하지 않고 <canvas> 속성에서 width 및 height 속성을 명시적으로 지정하십시오.

 

id 속성(어트리뷰트)는  <canvas> 요소에 국한되지 않는 글로벌HTML 속성 (global HTML attributes )중 하나로,  모든 HTML 요소에 적용 ( class 등등)될 수 있습니다.  대체로 항상 id 속성을 사용해 주는것이 좋은데, 이는 스크립트 구분을 쉽게 해 줄 수 있기 때문입니다.

<canvas>요소는 일반적인 사진/그림 등의 이미지 (margin, border, background…) 처럼 스타일을 적용시킬 수 있습니다. 하지만 이 방법은 실제 캔버스 위에 그림을 그리는것에는 영향을 끼치지 않습니다.  이 방법이 어떻게 사용되는지는 데모 단원(dedicated chapter)에서 확인 할 수 있습니다.  캔버스에 스타일링이 따로 지정 되있지 않았다면, 캔버스 스타일은 투명으로 설정되어있습니다.

 

대체 콘텐츠

<canvas> element differs from an <img> tag in that, like for <video>, <audio>, or <picture> elements, it is easy to define some fallback content, to be displayed in older browsers not supporting it, like versions of Internet Explorer earlier than version 9 or textual browsers. You should always provide fallback content to be displayed by those browsers.

대체 컨텐츠를 제공하는 것은 매우 간단합니다. <canvas>태그 안에  대체 컨텐츠를 삽입합니다. <canvas>태그 를 지원하지 않는 브라우저는 컨테이너를 무시하고 컨테이너 내부의 대체 콘텐츠를 렌더링 합니다. <canvas>를 지원하는 브라우저는 컨테이너 내부의 내용을 무시하고 캔버스를 정상적으로 렌더링합니다.

예를 들어, 캔버스 내용에 대한 텍스트 설명을 제공하거나 동적으로 렌더링 된 내용의 정적 이미지를 제공 할 수 있습니다. 이것은 다음과 같이 보일 수있습니다:

<canvas id="stockGraph" width="150" height="150">
  current stock price: $3.15 +0.15
</canvas>

<canvas id="clock" width="150" height="150">
  <img src="images/clock.png" width="150" height="150" alt=""/>
</canvas>

Telling the user to use a different browser that supports canvas does not help users who can't read the canvas at all, for example. Providing a useful fallback text or sub DOM helps to make the canvas more accessible.

Required </canvas> tag

As a consequence of the way fallback is provided, unlike the <img> element, the <canvas> element requires the closing tag (</canvas>). If this tag is not present, the rest of the document would be considered the fallback content and wouldn't be displayed.

If fallback content is not needed, a simple <canvas id="foo" ...></canvas> is fully compatible with all browsers that support canvas at all.

The rendering context

The <canvas> element creates a fixed-size drawing surface that exposes one or more rendering contexts, which are used to create and manipulate the content shown. In this tutorial, we focus on the 2D rendering context. Other contexts may provide different types of rendering; for example, WebGL uses a 3D context based on OpenGL ES.

The canvas is initially blank. To display something, a script first needs to access the rendering context and draw on it. The <canvas> element has a method called getContext(), used to obtain the rendering context and its drawing functions. getContext() takes one parameter, the type of context. For 2D graphics, such as those covered by this tutorial, you specify "2d" to get a CanvasRenderingContext2D.

var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');

첫 번째 줄의 스크립트는  document.getElementById() 메서드를 호출하여 <canvas> 요소를 나타내는 DOM 를 검색합니다.  요소가 있으면 getContext () 메서드를 사용하여 드로잉 컨텍스트에 액세스 할 수 있습니다.

 

Checking for support

The fallback content is displayed in browsers which do not support <canvas>. Scripts can also check for support programmatically by simply testing for the presence of the getContext() method. Our code snippet from above becomes something like this:

대체 콘텐츠는 <canvas>를 지원하지 않는 브라우저에 표시됩니다. 또한 스크립트는 getContext () 메소드의 존재 여부를 테스트함으로써 프로그래밍 방식으로 지원을 확인할 수 있습니다. 위의 코드 예제는 다음과 같습니다:

var canvas = document.getElementById('tutorial');

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

 

기본 골격 템플릿(skeleton template)

다음의 템플릿은 시작점을 나타내고있는 기본 템플릿으로 가장 기본적이며 다음 예시에 사용될 것 입니다.

알아두기: HTML 내에 스크립트(script)를 사용하는것은 좋은 연습 방법이 아닙니다. 다음의 예시에서는 간결하게 나타내기 위해 사용 한 것입니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>Canvas tutorial</title>
    <script type="text/javascript">
      function draw(){
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext){
          var ctx = canvas.getContext('2d');
        }
      }
    </script>
    <style type="text/css">
      canvas { border: 1px solid black; }
    </style>
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="150" height="150"></canvas>
  </body>
</html>

위의 스크립트에서는 draw()function을 사용 하였는데. 이는 페이지가 완전히 로딩 된 이후 실행됩니다; 이 function은 문서 내에서 load event에 따라 실행됩니다. This function, or one like it, could also be called using window.setTimeout(), window.setInterval(), or any other event handler, as long as the page has been loaded first.

다음은 템플릿이 사용 된 이후를 보여줍니다. 보이는 바와 같이, 초기에 blank 로 보여집니다.

 

기본 예제

 

먼저 두 개의 직사각형을 그린 간단한 예제를 보도록하겠습니다. 그 중 하나는 투명도(alpha transparency)를가집니다. 나중에 이 예제가 어떻게 작동하는지 자세히 살펴 보겠습니다.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
  <script type="application/javascript">
    function draw() {
      var canvas = document.getElementById("canvas");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");

        ctx.fillStyle = "rgb(200,0,0)";
        ctx.fillRect (10, 10, 50, 50);

        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.fillRect (30, 30, 50, 50);
      }
    }
  </script>
 </head>
 <body onload="draw();">
   <canvas id="canvas" width="150" height="150"></canvas>
 </body>
</html>

 

이 예제는 다음과 같습니다.

ScreenshotLive sample

문서 태그 및 공헌자

 이 페이지의 공헌자: OkHyeon, sujilee91, MuhunKim
 최종 변경: OkHyeon,