Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

Canvas API

HTML5에 추가된, HTML <canvas> 요소JavaScript에서 스크립트를 통해 그래픽을 그리는 데 사용될 수 있습니다. 예를 들어, 그래프 그리기, 사진 합성, 애니메이션 제작, 심지어 실시간 비디오 처리나 렌더링에도 쓰일 수 있습니다.

Mozilla 응용프로그램은 Gecko 1.8 (즉 Firefox 1.5)를 시작으로 <canvas>에 대한 지원을 받았습니다. 요소는 원래 OS X Dashboard 및 Safari를 위해 Apple에서 처음 도입했습니다. Internet Explorer는 버전 9부터 <canvas>를 지원합니다; 이전 버전 IE용, 페이지는 Google Explorer Canvas 프로젝트로부터 스크립트를 포함하여 <canvas>에 대한 지원을 사실상 추가할 수 있습니다. Google Chrome 및 Opera 9도 <canvas>를 지원합니다.

<canvas> 요소는 웹 페이지 상 하드웨어 가속된 3D 그래픽을 그리기 위해 WebGL에 의해 사용될 수도 있습니다.

이는 그저 CanvasRenderingContext2D.fillRect() 메서드를 사용하는 간단한 코드 조각(snippet)입니다.

HTML

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

JavaScript

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

ctx.fillStyle = "green";
ctx.fillRect(10, 10, 100, 100);

아래 코드를 편집해 canvas에서 바뀐 내용의 실시간 갱신을 지켜보세요:

참고

WebGLRenderingContext 관련 인터페이스는 WebGL 아래 참고서화됐습니다.

안내서 및 지도서

Canvas 지도서
<canvas> 기본 사용법 및 고급 기능을 다루는 종합 지도서.
코드 조각: Canvas
<canvas>를 포함하는 일부 확장 기능 개발자 지향 코드 조각.
데모: 기본 광선 투사기
cavas를 사용한 광선 추적(ray-tracing) 애니메이션 데모.
canvas에 DOM 객체 그리기
HTML 요소와 같은 DOM 콘텐츠를 canvas에 그리는 방법.
canvas 사용 비디오 조작
실시간으로 video 데이터를 조작하기 위해 <video><canvas> 조합.

리소스

일반

라이브러리

  • Fabric.js는 SVG 파싱 능력이 있는 오픈소스 Canvas 라이브러리입니다.
  • Kinetic.js는 데스크톱 및 모바일 어플을 위한 상호 작용에 초점을 둔 오픈소스 Canvas 라이브러리입니다.
  • Paper.js는 HTML5 Canvas 위에서 돌아가는 오픈소스 벡터 그래픽 scripting 프레임워크입니다.
  • libCanvas는 강력하고 가벼운 canvas 프레임워크입니다.
  • Processing.js는 Processing 시각화 언어의 포팅입니다.
  • PlayCanvas는 오픈 소스 게임 엔진입니다.
  • Pixi.js는 오픈 소스 게임 엔진입니다.
  • PlotKit은 차트 및 그래프 라이브러리입니다.
  • Rekapi는 Canvas용 애니메이션 keyframing API입니다.
  • PhiloGL은 데이터 시각화, 창조 코딩 및 게임 개발용 WebGL 프레임워크입니다.
  • JavaScript InfoVis Toolkit은 웹용 대화형 2D Canvas 데이터 시각화를 만듭니다.
  • EaselJS는 게임 및 예술용으로 Canvas를 쓰기 쉽게 하는 무료/오픈 소스 라이브러리입니다

스펙

스펙 상태 설명
WHATWG HTML Living Standard
The definition of 'Canvas' in that specification.
Living Standard  

참조

문서 태그 및 공헌자

태그: 
 이 페이지의 공헌자: Netaras, teoli, ethertank, dextra, Suguni
 최종 변경: Netaras,