[Canvas] getContext()

티스토리 뷰

Canvas/이론

[Canvas] getContext()

millfeel1298 2021. 12. 10. 05:46

<canvas>요소의 그리기 표면에 대한 렌더링 컨텍스트를 제공한다.

# 구문

var ctx = canvas.getContext(contextType);
var ctx = canvas.getContext(contextType, contextAttributes);

[contextType]

캔버스에 연관된 드로잉 컨텍스트를 정의하는 컨텍스트 식별자를 갖는 DOMString이다.

값	설명
2d	2차원 렌더링 컨텍스트를 나타내는 CanvasRenderingContext2D 객체를 생성하게 하고 도형, 텍스트, 이미지 및 기타 개체를 그리는데 사용된다.
webgl	3차원 렌더링 컨텍스트를 나타내는 WebGLRenderingContext 객체를 생성한다. 이 컨텍스트는 WebGL 버전 1 (OpenGL ES 2.0)을 구현하는 브라우저에서만 사용가능하다.
bitmaprenderer	캔버스의 컨텐츠를 주어진 ImageBitmap으로 대체하기 위한 기능만을 제공하는 ImageBitmapRenderingContext를 생성한다.

[예제]

getContext('2d')를 사용했을 경우. 아래와 같이 '2d' 객체를 사용할 수 있게 된다.

<canvas class="canvas"></canvas>
<script>
  const $canvas = document.querySelector('.canvas');
  const 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>

# Canvas 지원 여부 검사

<canvas id="canvas"></canvas>

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