자바스크립트로 만드는 브라우저 캔버스!

캔버스란?

캔버스는 HTML5에서 추가된 그래픽 요소로, 자바스크립트로 그림 그리기, 이미지 합성, 애니메이션 만들기 등 다양한 그래픽 작업을 할 수 있게 해줍니다. 캔버스는 특정 영역을 선택하여 해당 영역에 자유롭게 그림을 그릴 수 있는데, 캔버스는 여러분의 상상력을 자유롭게 담아낼 수 있는 좋은 도구입니다.

캔버스 사용하기

캔버스를 사용하기 위해서는 우선 HTML 파일에 <canvas> 태그를 추가해야 합니다. 그리고 자바스크립트 코드에서 해당 캔버스를 선택하여 그리기를 시작할 수 있습니다.

const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');

이렇게 하면 캔버스를 선택하고 2D 그리기 도구를 선택할 수 있습니다.

그림 그리기

canvas에 다양한 그림을 그리기 위해서는 다양한 메서드들이 존재합니다. 여러분은 사각형, 원, 선, 이미지 등을 자유롭게 그릴 수 있습니다.

context.fillStyle = '#2a2a2a';
context.fillRect(0, 0, canvas.width, canvas.height);

context.beginPath();
context.arc(100, 100, 50, 0, Math.PI * 2, false);
context.strokeStyle = '#fff';
context.stroke();

이렇게 하면 캔버스에 검은색 바탕에 흰색 원이 그려집니다.

애니메이션 만들기

애니메이션을 만들기 위해서는 requestAnimationFrame 메서드를 사용하여 자연스럽게 그림을 그려줍니다.

function draw() {
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.fillStyle = '#2a2a2a';
  context.fillRect(0, 0, canvas.width, canvas.height);

  // ... 여러분의 그림 그리기 코드 ...

  requestAnimationFrame(draw);
}

draw();

이렇게 하면 매 프레임마다 캔버스를 지우고 다시 그리면서 애니메이션을 만들 수 있습니다.

자바스크립트 브라우저 캔버스

자바스크립트로 만드는 브라우저 캔버스는 다양한 작업을 할 수 있어 크리에이티브한 작업에 적합합니다. 직접 그림을 그려보면서 자신만의 캔버스 작업을 만들어보세요!