Canvas API
Canvas API는 JavaScript와 HTML <canvas>
엘리먼트를 통해 그래픽을 그리기위한 수단을 제공합니다. 무엇보다도 애니메이션, 게임 그래픽, 데이터 시각화, 사진 조작 및 실시간 비디오 처리를 위해 사용됩니다.
Canvas API는 주로 2D 그래픽에 중점을 두고 있습니다. WebGL API 또한 <canvas>
엘리먼트를 사용하며, 하드웨어 가속 2D 및 3D 그래픽을 그립니다.
기본 예시
canvas에 초록색 사각형을 그리는 간단한 예시입니다.
HTML
html
<canvas id="canvas"></canvas>
JavaScript
Document.getElementById()
메소드는 HTML <canvas>
엘리먼트에 대한 참조를 얻습니다. 그 다음, HTMLCanvasElement.getContext()
메소드는 엘리먼트의 컨텍스트(렌더링될 그리기의 대상)를 얻습니다.
실제 그리기는 CanvasRenderingContext2D
(en-US) 인터페이스를 사용해 수행됩니다. fillStyle
(en-US) 프로퍼티는 사각형을 초록색으로 만듭니다. fillRect()
(en-US) 메소드는 좌측 상단 코너를 (10, 10) 위치에 놓으며, 너비를 150, 높이를 100으로 지정합니다.
js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(10, 10, 150, 100);
결과
레퍼런스
HTMLCanvasElement
CanvasRenderingContext2D
(en-US)CanvasGradient
(en-US)CanvasImageSource
(en-US)CanvasPattern
(en-US)ImageBitmap
(en-US)ImageData
RenderingContext
TextMetrics
(en-US)OffscreenCanvas
ExperimentalPath2D
(en-US) ExperimentalImageBitmapRenderingContext
(en-US) Experimental
참고: 노트: WebGLRenderingContext
에 관련된 인터페이스는 WebGL 하위에 참조되어있습니다.
CanvasCaptureMediaStream
(en-US)은 관련된 인터페이스입니다.
가이드 및 튜토리얼
- Canvas 튜토리얼
-
Canvas API의 기본적인 사용과 고급 기능 모두를 다루는 이해하기 쉬운 튜토리얼.
- HTML5 Canvas 깊이 살펴보기
-
Canvas API 및 WebGL의 실습, 자세한 소개.
- Canvas 핸드북
-
Canvas API에 대한 유용한 레퍼런스.
- 데모: A basic ray-caster
-
Canvas를 사용한 ray-tracing 애니메이션 데모.
- Canvas를 사용하여 비디오 조작
라이브러리
Canvas API는 굉장히 강력하지만, 사용하는 것이 항상 간단하지 않습니다. 아래에 나열된 라이브러리들은 캔버스 기반 프로젝트를 더 빠르고 더 쉽게 생성할 수 있게 해줍니다.
- EaselJS는 게임, 생성 예술 및 기타 고도의 그래픽 경험을 쉽게 생성할 수 있게 해주는 오픈소스 캔버스 라이브러리입니다.
- Fabric.js는 SVG 파싱 기능을 갖춘 오픈소스 캔버스 라이브러리입니다.
- heatmap.js는 캔버스 기반 데이터 열지도를 생성하기위한 오픈소스 라이브러리입니다.
- JavaScript InfoVis Toolkit은 인터렉티브한 데이터 시각화를 생성합니다.
- Konva.js는 데스크탑 및 모바일 애플리케이션을 위한 2D 캔버스 라이브러리입니다.
- p5.js는 예술가, 디자이너, 교육자 및 입문자를 위한 캔버스 그리기 기능의 모든 세트를 포함하고 있습니다.
- Paper.js는 HTML5 Canvas 위에서 실행되는 오픈소스 벡터 그래픽 스크립팅 프레임워크입니다.
- Phaser는 Canvas 및 WebGL 기반의 브라우저 게임을 위한 빠르고, 자유롭고, 재미있는 오픈소스 프레임워크입니다.
- Processing.js는 Processing 시각화 언어의 포트입니다.
- Pts.js는 canvas 및 SVG를 사용한 창의적인 코딩 및 시각화를 위한 라이브러리입니다.
- Rekapi는 Canvas를 위한 애니메이션 키 프레임 API입니다.
- Scrawl-canvas는 2D 캔버스 엘리먼트를 생성하고 조작하기위한 오픈소스 JavaScript 라이브러리입니다.
- ZIM 프레임워크는 canvas에서의 창의적인 코딩을 위한 편의성, 컴포넌트 및 컨트롤을 제공하는 프레임워크입니다. 접근성 및 다채로운 튜토리얼을 포함합니다.
참고: 노트: WebGL을 사용하는 2D 및 3D를 위한 WebGL API를 확인하세요.
명세
Specification |
---|
HTML Standard # the-canvas-element |
브라우저 호환성
Mozilla 애플리케이션은 Gecko 1.8(Firefox 1.5 (en-US))을 시작으로 <canvas>
에 대한 지원을 받았습니다. OS X Dashboard 및 Safari를 위해 Apple이 소개한 것이 캔버스 엘리먼트의 기원입니다. Internet Explorer는 9버전부터 <canvas>
를 지원하며, 이전 버전의 IE에서는 Google의 Explorer Canvas 프로젝트의 스크립트를 추가하여 <canvas>
에 대한 지원을 효과적으로 추가할 수 있습니다. Google Chrome 및 Opera 9 또한 <canvas>
를 지원합니다.