HTML5 Canvas Tutorial for Beginners 필기

※ 이 글은 예전 블로그에서 퍼왔으며 2020.3.6.에 작성된 글입니다.

※ 이 글은 해당 사이트를 보고 작성한 글 입니다.

---

 

모든 HTML5 Canvas를 위한 4가지 필수 스킬들

​

1. Creating and Resizing your canvas

(Canvas를 만들고 크기를 조절할 수 있는 능력)

​

2. Drawing Element

(요소를 그릴 수 있는 능력)

​

3. Animating Element

(정적인 요소를 움직일 수 있게하는 능력)

​

4. Interacting with Element

(이벤트에 따라 요소를 움직일 수 있게하는 능력)

---

Lecture #1. Creating and Resizing Canvas

​

· Canvas의 사이즈 조절은 HTML attribute나 JS로 하자

canvas.width = innerWidth;
canvas.height = innerHeight;

---

Lecture #2. Drawing On the Canvas

​

· Canvas Objects:

- 사각형(rect)

- 라인(line)

- 호(arc), 원(circle)

- 베지에 곡선(Bezier Curve)

- 이미지(image)

- 문자(text)

​

· 어떤 도형이나 라인이던 간에 path를 나타내기 전에 beginPath( );를 선언해주자.

이는 두 개 이상의 path들이 서로 연관되는 것(connecting) 분리시켜주는 역할을 한다.

​

· 여러 개의 Objects를 만들어 내고 싶다면 당연히 for문을 사용하자.

---

Lecture #3. Animating the Canvas

​

· Animation 사용하기

function animation() {
    requestAnimationFrame(animation);
}

· 잔상없애는 법

​

1. rect를 Canvas 전체크기로 생성하여 배경색을 채워준다.

​

2. clearRect( )를 이용한다.

context.clearRect(x, y, width. height);

· 무작위한 방향으로 퍼져나가는 원을 만들고 싶다면

// (Math.random() - 0.5) = 방향 값을 양수와 음수 둘 다 부여하기 위해
const dx = (Math.random() - 0.5) * 8; 
const dy = (Math.random() - 0.5) * 8;

· 브라우저와의 충돌 판정 (원일 경우)

if (this.x + this.r > innerWidth || this.x - this.r < 0) {
  this.dx = -this.dx;
}

if (this.y + this.r > innerHeight || this.y - this.r < 0) {
  this.dy = -this.dy;
}

· 브라우저 경계에 걸쳐지는 원이 없도록 하는 좌표

const x = Math.random() * (innerWidth - r * 2) + r;
const y = Math.random() * (innerHeight - r * 2) + r;

---

Lecture #4. Interacting with the Canvas

​

· 원이 마우스 포인터 영역 근처일 시 커지게 하기

const mouse = {
    x: undefined,
    y: undefined
}

window.addEventListener("mousemove", function (e) {
    mouse.x = event.x;
    mouse.y = event.y;
})

if (mouse.x - this.x < mouseArea && 
    mouse.x - this.x > -mouseArea && 
    mouse.y - this.y < mouseArea && 
    mouse.y - this.y > -mouseArea) {
  if (this.r < maxR) {
    this.r += 1;
  }
} else if (this.r > this.minR) {
  this.r -= 1;
}

· 브라우저 사이즈 조절 시 캔버스 사이즈 재조정

window.addEventListener("resize", function () {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
})