canvas

Canvas API는 JavaScript와 HTML canvas 엘리먼트를 통해 그래픽을 그리기위한 수단을 제공한다.

HTML

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

javascript

const canvas = document.querySelector("canvas");

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

실제 그리기는 CanvasRenderingContext2D (en-US) 인터페이스를 사용해 수행된다.
fillStyle (en-US) 프로퍼티는 사각형을 초록색으로 만든다.
fillRect() (en-US) 메소드는 좌측 상단 코너를 (10, 10) 위치에 놓으며, 너비를 150, 높이를 100으로 지정한다.

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

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

canvas.getContext는 2d, 3d 등이 인자로 들어오는데, 이 경우는 2d로 만드는 것이다.

fillStyle

fillStyle은 canvas에 색을 넣는 것이다.

fillRect()

fillRect()에는 4개의 인자가 들어오는데 순서대로 말해보겠다.
1. 처음 시작하는 x 좌표
2. 처음 시작하는 y 좌표
3. canvas width
4. canvas height

const canvas = document.querySelector("canvas");

//2D로 설정하기
const c = canvas.getContext("2d");

//canvas 넓이 설정
canvas.width = 1024;
canvas.height = 576;

// canvas 채울 색
c.fillStyle = "black";
// canvas 시작 위치와 크기 지정.
c.fillRect(0, 0, canvas.width, canvas.height);

window.requestAnimationFrame()

브라우저에게 수행하기를 원하는 애니메이션을 알리고 다음 리페인트가 진행되기 전에 해당 애니메이션을 업데이트하는 함수를 호출하게 한다.

function animate() {
  window.requestAnimationFrame(animate);
  c.fillStyle = "black";
  c.fillRect(0, 0, canvas.width, canvas.height);
  player.update();
  enemy.update();
}

위의 예제는 animate를 무한루프로 돌리는 함수다.

보통 setInterval과 비교가 되는데, 차이점 중 가장 큰 것은 requestAnimatrionFrame이 더 부드럽고 좋으나, 속도가 조절이 불가능하다.

cancelAnimationFrame(callback)로 애니매이션을 취소할 수 있다.