Canvas API

• JavaScript 로 그래픽을 그릴 수 있게 해주는 API
• WebGL 로 2D 그래픽이나 3D 그래픽을 그릴 수 있습니다.

context

• canvas api 에서 붓을 의미합니다.
• 대부분 줄여서 ctx 로 사용합니다.

canvas api 의 좌표 시스템

• canvas 의 위치 기준에서 좌상단 모서리를 (0, 0) 으로 기준합니다.
• css 에서 canvas 의 크기를 지정한 후 js 에서도 canvas 의 크기를 명시해줘야 합니다.

fillRect(x, y, w, h) 함수

• 단축함수, rect(x, y, w, h) 함수 + fill() 함수

strokeRect(x, y, w, h) 함수

• 단축함수, rect(x, y, w, h) 함수 + stroke() 함수

예시

• 코드

// ~/app.js

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
canvas.width = 800;
canvas.height = 800;

ctx.rect(50, 50, 100, 100);
ctx.rect(150, 150, 100, 100);
ctx.fill();
ctx.rect(250, 250, 100, 100);
ctx.stroke();

• 페이지
  

paths

• paths 동일할때
  • 1 초 뒤 네 번째 사각형 생성과 동시에 모든 사각형이 빨간색으로 채워짐

// ~/ app.js

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
canvas.width = 800;
canvas.height = 800;

ctx.rect(50, 50, 100, 100);
ctx.rect(150, 150, 100, 100);
ctx.fill();
ctx.rect(250, 250, 100, 100);
ctx.stroke();
ctx.rect(350, 350, 100, 100);
ctx.fillStyle = "red";
setTimeout(() => {
  ctx.fill();
}, 1000);

• paths 나누었을때 (beginPath 함수)
  • 1 초 뒤 네 번째 사각형 생성과 동시에 네 번째 사각형 빨간색으로 채워짐

// ~/ app.js

...(생략)

ctx.rect(50, 50, 100, 100);
ctx.rect(150, 150, 100, 100);
ctx.fill();
ctx.rect(250, 250, 100, 100);
ctx.stroke();

ctx.beginPath();
ctx.rect(350, 350, 100, 100);
ctx.fillStyle = "red";
setTimeout(() => {
  ctx.fill();
}, 1000);