Skip to content

Canvas element

캔버스 요소(canvas element)는 HTML5의 일부로서 2차원 모양과 비트맵 그림의 스크립트 작성이 가능한 동적 렌더링을 허용한다. 비트맵을 업데이트하는 낮은 수준의 절차적 모델이며 씬 그래프가 내장되어 있지 않다.

Categories

APIs

Example

다음의 코드는 캔버스 요소를 HTML 문서에서 만든다: 

<canvas id="example" width="200" height="200">
브라우저가 HTML5 캔버스를 지원하지 않으면 이 문구가 표시됩니다.
</canvas>

자바스크립트를 사용하여 캔버스를 그릴 수 있다: 

var example = document.getElementById('example');
var context = example.getContext('2d');
context.fillStyle = 'red';
context.fillRect(30, 30, 50, 50);

이 코드는 화면에 빨간 사각형을 그린다.

캔버스 API는 캔버스 컨텍스트의 모든 속성을 저장하고 복원하기 위해 save()와 restore()도 제공한다.

Bold / Italic font 

ctx.font = "italic 10pt Courier";
ctx.font = "bold 10pt Courier";
ctx.font = "italic bold 10pt Courier";

Draw Image 

var img = new Image();
img.onload = function() {
    ctx.drawImage(img, 0, 0);
}
img.src = "http://upload.wikimedia.org/wikipedia/commons/d/d2/Svg_example_square.svg";

Rotation Text 

context.save();  // Important !
context.translate(x, y);
context.rotate(-Math.PI / 4);
context.textAlign = 'center';
context.fillText('center', 0, lineHeight / 2);
context.restore();  // Important !

context.save()와 context.restore() 사이에 적용해야 다른 Shape 도 회전 되는 현상을 방지할 수 있다.

Line Style

lineWidth
선 두께 지정 ( 기본 1.0 )
Canvas_context.lineWidth_samples.png
strokeStyle
선의 색상 지정
lineCap
선 끝 부분의 스타일 지정 ( butt, round, square )
Canvas_context.lineCap_samples.png
lineJoin
선이 꺽이는 부분의 스타일 지정 (bevel, round, miter)
Canvas_context.lineJoin_samples.png

점선 찍는 방법 

context.setLineDash([10, 2]);

Rounded Rectangle 

context.fillStyle = 'red';
context.strokeStyle = 'blue';
context.lineWidth = 2;
context.beginPath();
context.roundRect(x1, y1, width, height, [5, 5, 5, 5]);
context.fill();
context.stroke();

Bezier Curve

HTML5_canvas_-bezier_curve-_hint.png

quadraticCurveTo

2차 베지에 곡선 (컨트롤 포인트 1개) 

quadraticCurveTo(제어점x, 제어점y, 종료점x, 종료점y)

bezierCurveTo

3차 베지에 곡선 (컨트롤 포인트 2개) 

bezierCurveTo(제어점x1, 제어점y1, 제어점x2, 제어점y2, 종료점x, 종료점y)

Libraries

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에서의 창의적인 코딩을 위한 편의성, 컴포넌트 및 컨트롤을 제공하는 프레임워크입니다. 접근성 및 다채로운 튜토리얼을 포함합니다.
  • PixiJS

See also

Favorite site

Guide