canvas tutorial 1

Canvas API

Javascript, HTML 엘리먼트를 통해 그래픽을 그릴 수 있다.

애니메이션, 게임 그래픽, 데이터 시각화, 사진 조작 및 실시간 비디오 처리를 위해 사용된다.

 

Canvas API는 주로 2D 그래픽에 중점을 두고 있습니다. WebGL API 또한 <canvas> 엘리먼트를 사용하며, 하드웨어 가속 2D 및 3D 그래픽을 그린다.

 

html

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

JS

const canvas = document.getElementById('canvas');

 

HTML <canvas> 엘리먼트에 대한 참조를 얻는다.

 

const ctx = canvas.getContext('2d');

엘리먼트의 컨텍스트(렌더링될 그리기의 대상)를 얻는다.

 

실제 그리기

getContext('2d') 메서드를 이용해 그린다.

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

 

fillRect(x, y, width, height)
색칠된 직사각형 그리기.

strokeRect(x, y, width, height)
직사각형 윤곽선 그리기.

 

clearRect(x, y, width, height)
특정 부분을 지우는 직사각형, 이 지워진 부분은 완전히 투명해진다.

 

moveTo(x, y)
펜을  x와 y 로 지정된 좌표로 이동.

 

lineTo(x, y)
현재의 드로잉 위치에서 x와 y로 지정된 위치까지 선 그리기.

 

canvas save & restore

캔버스 상태 저장 및 복원하기 

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');

  ctx.fillRect(0, 0, 150, 150);   // 기본 설정으로 사각형을 그리기
  ctx.save();                  // 기본 상태를 저장하기
 
  ctx.fillStyle = '#09F';      // 설정 변경하기
  ctx.fillRect(15, 15, 120, 120); // 새로운 설정으로 사각형 그리기

  ctx.save();                  // 현재 상태 저장하기
  ctx.fillStyle = '#FFF';      // 설정 변경하기
  ctx.globalAlpha = 0.5; 
  ctx.fillRect(30, 30, 90, 90);   // 새로운 설정으로 사각형 그리기

  ctx.restore();               // 이전 상태 복원하기
  ctx.fillRect(45, 45, 60, 60);   // 복원된 설정으로 사각형 그리기

  ctx.restore();               // 초기 상태를 복원하기
  ctx.fillRect(60, 60, 30, 30);   // 복원된 설정으로 사각형 그리기
}