[2] Canvas API 활용하기

Canvas API 활용하기

 

canvas api 는 노마드코더 강의를 들으며 처음 접했는데, 

사실 처음 들었을 땐 너무 복잡한 느낌이었고, 이해가 잘 되지 않았다.

(정말 말 그대로 따라 치기만 했었다)

초심자는 노마드코더 강의를 추천한다! 무료고 니꼬쌤이 설명도 잘해주심!

 

약 두달 간의 개발 공부 공백이 있었던 터라, 

강의를 들으며 cavas api 에 대한 기본적인 내용을 복습하며 mdn 문서도 같이 봤는데, 

예전의 기억이 무색하게 이해가 잘 됐고 재밌었다.

단순하게 생각하면 되는 것들을 복잡하게만 생각한 것 아닌가 싶다. 

 

 

참고 사이트

👇 mdn 한국어 버전 (전부 다 번역이 되어있진 않다)

캔버스(Canvas) 기본 사용법 - Web API | MDN

 

👇 mdn 영어 버전

 

Canvas API - Web APIs | MDN

 

👇 노마트코더 강의 - 무료

바닐라 JS로 그림 앱 만들기 – 노마드 코더 Nomad Coders

 

 

Canvas API 란 무엇인가

말 그대로 웹화면을 캔버스로 활용할 수 있는 재밌는 도구다. 

cavan api 를 사용하는 WebGL 을 사용하면 2D 뿐만 아니라 3D 작업도 할 수 있다. 

 

https://flaviocopes.com/canvas/

HTML Canvas API Tutorial

이 사이트에서도 canvas api 를 이용한 재밌는 예시들을 볼 수 있다. 

 

 

 

1. canvas 사용하기

canvas 속성을 이용해 canvas 를 만들어준다.

<canvas></canvas>

canvas 요소는 width 와 height 두가지 속성만 가진다. 그리고 이 속성들은 선택사항이다.

때문에 이렇게 HTML 에서 따로 속성을 써주지 않아도 된다.

JS 와 CSS 에서 canvas 의 크기를 설정해줄 수 있다.

 

 

 

2. 도형 그리기

 

도형 그리기에 앞서서 canvas의 왼쪽위 모서리가 기준이 된다. (0,0) 지점. 

JS 에서 context 를 선언해 준 뒤 뭔가를 그릴 수 있다.

 

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

    ctx.beginPath();
    ctx.moveTo(75, 50);
    ctx.lineTo(100, 75);
    ctx.lineTo(100, 25);
    ctx.fill();
  }
}

 

메소드 설명

beginPath()

- 이전의 도형과 별개로 새로운 도형이나 선을 그릴 때 사용한다. 

- 컬러/선의 굵기 등 다른 요소 그리고 싶을 때 사용할 수 있다. 사용하지 않으면 이전에 그린 도형들과 동일하다고 간주된다. 

 

moveTo(x, y)

- 펜을 옮긴다고 설명 되어있는데, 그것보단 펜을 들고 있는 손이 해당 좌표로 이동한다고 이해하는 게 더 편했다. 

- (x,y) 지점 위에 떠있는 펜을 잡은 손을 상상해보면 됨!

- 실제로 그려지는 건 없음. 

- 연결되지 않은 경로를 그리는 데 사용할 수 있따.

 

lineTo(x,y)

- 현재의 위치에서 (x, y) 지점까지 실제로 그려질 밑그림이라고 생각하면 된다.

- moveTo(1,1) 후 lineTo(3,3) 를 적는다면 아래 그림과 같이 예비 선이 그어지는 것.  

(이후 색칠 혹은 선그리기를 하지 않으면 도형이 보이지 않을 수도 있다)

 

fill()

- lineTo() 등의 메소드로 만든 도형의 면적을 채운다. 

- fillStyle = 'color' 로 컬러를 지정할 수 있다.

 

stroke()

- lineTo() 등의 메소드로 만든 도형의 선을 칠한다.

- strokeStyle = 'color'로 컬러를 지정할 수 있다.

 

 

 

 

 

3. 이미지 사용하기

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images

Using images - Web APIs | MDN

 

const img = new Image(); // Create new img element
img.src = "myImage.png"; // Set source path

ctx.drawImage(image, dx, dy, dWidth, dHeight)

Image() 를 선언해주고, src 에 이미지 파일의 경로를 써주면 된다. 

이후 drawImage() 로 이미지를 캔버스에 그려주면 되는데, 

drawImage(선언한 이미지, 이미지가 시작할 x축 위치, 이미지가 시작할 y축 위치, 이미지의 x 축 너비, 이미지의 y축 너비) 이렇게 작성해주면 된다. 

context.drawImage(
        image,
        0,  
        0,
        CANVAS_WIDTH,
        CANVAS_HEIGHT
);

 가령 이렇게 써준 경우엔 

이미지를 캔버스 (0,0) 의 지점부터 canvas 크기만큼 그리겠다는 의미인데, 

간단히 말하면 캔버스 전체를 꽉 채우겠단 뜻이다. 

 

파일첨부한 이미지 파일을 불러온 후 onload() 함수를 함께 활용해 이미지를 그릴 수도 있다.

const fileInput = document.getElementById("file");

function onFileChange(event) {
  const file = event.target.files[0];
  const url = URL.createObjectURL(file);
  const image = new Image();
  image.src = url;
  image.onload = function () {
    ctx.drawImage(image, 0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
    fileInput.value = null;
  };
}

fileInput.addEventListener("change", onFileChange);

파일첨부로 이미지를 로드

 

 

 

canvas Api 를 사용하기에 기본적인 내용을 정리해봤다.

앞으로 보충할 내용이 있다면 더 추가해볼 예정!